<template>
  <div class="container">
    <!-- 面包屑 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>头条上传</el-breadcrumb-item>
      <el-breadcrumb-item>
        <span class="u-cursor" @click="$router.back()">计划管理</span>
      </el-breadcrumb-item>
      <el-breadcrumb-item>{{ pageTitle }}计划</el-breadcrumb-item>
    </el-breadcrumb>
    <Container>
      <div
        style="
          height: 300px;
          position: fixed;
          right: 100px;
          top: 50%;
          transform: translateY(-50%);
        "
      >
        <el-steps direction="vertical" :active="active" ref="steps">
          <el-step title="广告组" @click.native="toStep(1)"></el-step>
          <el-step title="素材" @click.native="toStep(2)"></el-step>
          <el-step title="投放设置" @click.native="toStep(3)"></el-step>
          <el-step title="定向设置" @click.native="toStep(4)"></el-step>
          <el-step title="创意设置" @click.native="toStep(5)"></el-step>
        </el-steps>
      </div>
      <el-form
        class="m-form--detail"
        label-width="160px"
        :model="pageData"
        :rules="pageRules"
        ref="pageForm"
      >
        <div id="div1">
          <ContainerTitle>请选择投放账号</ContainerTitle>
          <el-form-item prop="mainAccount" size="small" label="头条账户">
            <el-select
              class="u-w350"
              placeholder="请选择头条账户(手动搜索+多选)"
              filterable
              multiple
              v-model="pageData.mainAccount"
              @change="handleChangeMainAccount"
              @remove-tag="removeTag"
            >
              <el-option
                v-for="item in mainAccountOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <ContainerTitle>创建广告组</ContainerTitle>
          <el-form-item>
            <el-radio-group v-model="pageData.chooseType">
              <el-radio-button :label="0">新增</el-radio-button>
              <el-radio-button :label="1">选择已有</el-radio-button>
              <!--  <el-radio-button :label="3">自定义</el-radio-button> -->
            </el-radio-group>
          </el-form-item>
          <el-form-item
            size="small"
            label="广告组名称"
            v-if="pageData.chooseType == 0"
            prop="advGroupName"
          >
            <el-input
              class="u-w350"
              placeholder="1-40个汉字"
              v-model="pageData.advGroupName"
              rows="5"
              maxlength="40"
            ></el-input>
          </el-form-item>
          <el-form-item size="small" v-if="pageData.chooseType == 1">
            <div class="bg-purple-light text-info u-mt15 u-w350">
              1、此字段为分账户配置，请先选择投放账户<br />
              2、取目前头条中各账户已有的广告组<br />
              3、此次创建的计划均在选择的广告组下
            </div>
          </el-form-item>
          <el-form-item size="small" label="推广目的">
            <el-radio-group v-model="pageData.tgmd" @change="selectTgmd">
              <el-radio-button :label="0">应用推广</el-radio-button>
              <el-radio-button :label="1">销售线索收集</el-radio-button>
              <!--  <el-radio-button :label="3">自定义</el-radio-button> -->
            </el-radio-group>
          </el-form-item>
          <el-form-item v-if="pageData.chooseType == 1" label="账户广告组">
            <el-form-item
              v-for="(item, index) in pageData.groupList"
              :key="index"
              :prop="'groupList.' + index + '.groupName'"
              :rules="pageRules.groupName"
              class="u-mt15"
            >
              <div>{{ item.accountName }}</div>
              <el-select
                class="u-w350"
                placeholder="请选择广告组名称"
                filterable
                v-model="item.groupName"
                @change="selectGroupName"
              >
                <el-option
                  v-for="items in item.optionList.list[0]"
                  :key="items.campaign_id"
                  :label="items.campaign_name"
                  :value="items.campaign_id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-form-item>
          <el-form-item size="small" label="广告组预算">
            <div class="u-black">不限</div>
            <!-- {{pageData.budget}} -->
          </el-form-item>
          <ContainerTitle>选择投放范围</ContainerTitle>
          <el-form-item label="投放范围">
            <el-radio-group
              v-model="pageData.delivery_range"
              @change="changeDeliveryRange"
            >
              <el-radio-button :label="'DEFAULT'">默认</el-radio-button>
              <el-radio-button :label="'UNION'">穿山甲</el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item
            label="投放形式"
            v-if="pageData.delivery_range == 'UNION'"
          >
            <el-radio-group v-model="pageData.union_video_type">
              <el-radio-button :label="'ORIGINAL_VIDEO'">原生</el-radio-button>
              <el-radio-button :label="'REWARDED_VIDEO'"
                >激励视频</el-radio-button
              >
            </el-radio-group>
          </el-form-item>
        </div>
        <div id="div2">
          <ContainerTitle>上传素材</ContainerTitle>
          <el-form-item label="创意方式">
            <el-radio-group v-model="pageData.creativeType">
              <el-radio-button :label="1">自定义</el-radio-button>
              <el-radio-button :label="2">程序化</el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item size="small" label="素材类型">
            <div class="u-black">竖版视频</div>
          </el-form-item>
          <!--           <el-form-item
            prop="videoSrc"
            size="small"
            label="上传视频："
            ref="creativeUploadVideo"
          >
            <div class="bg-purple-light text-info">
              <div>
                1、为了保证传输速度 传输成功率，目前支持上传视频数量：1-15
              </div>
              <div>2、竖版视频分辨率：720 & 1280</div>
              <div>3、视频格式：mp4</div>
              <div>4、竖版视频大小100M以内</div>
              <div>5、竖版视频时长≥4s</div>
            </div>
            <div v-if="pageData.videoFileList.length > 0" class="u-mt15 u-mr10">
              <video
                v-for="(item, index) in pageData.videoFileList"
                :key="index"
                :src="item.videoUrl"
                controls="controls"
                class="u-mr10"
                id="avatar"
              ></video>
            </div>
            <el-upload
              class="avatar-uploader u-w350 u-mt15"
              ref="uploadVideo"
              multiple
              :limit="20"
              :show-file-list="true"
              :on-exceed="handleExceedVideo"
              :action="`${BASE_URL}/marketing_tt/api/task_tt_general/upload_video`"
              :auto-upload="true"
              :on-progress="uploadVideoProcess"
              :before-upload="videoBeforeUpload"
              :on-change="onChangeVideo"
              :on-success="handleSuccessVideo"
              accept=".mp4"
              :on-remove="handleRemoveVideo"
            >
              <i
                class="el-icon-plus avatar-uploader-icon"
                v-if="pageData.videoFileList.length < 20"
              ></i>
              <div class="el-upload__tip" slot="tip">
                只能上传720*1280，MP4格式，且不超过100M的视频
              </div>
            </el-upload>
          </el-form-item> -->
          <el-form-item label="解析视频信息">
            <el-input
              type="textarea"
              class="u-w500"
              :rows="15"
              placeholder=""
              v-model="copyVideoInfo"
            ></el-input>
            <el-button
              type="primary"
              style="margin-left: 10px"
              @click="analysisVideo(copyVideoInfo)"
              >解析视频</el-button
            >
          </el-form-item>
          <el-form-item
            prop="videoFileList"
            size="small"
            label="视频："
            ref="creativeUploadVideo"
          >
            <div v-if="pageData.videoFileList.length > 0" class="u-mt15 u-mr10">
              <div
                v-for="(item, index) in pageData.videoFileList"
                :key="index"
                class="video-content"
              >
                <video
                  :src="item.videoUrl"
                  controls="controls"
                  class="u-mr10"
                  id="avatar"
                ></video>
                <i
                  class="el-icon-close video-icon"
                  @click="deleteVideoList(index)"
                ></i>
                <div class="video-name">{{ item.fileName }}</div>
              </div>
            </div>
          </el-form-item>
          <el-form-item label="创意标题" :rules="pageRules.creativeTitle">
            <el-input
              type="textarea"
              class="u-w350"
              placeholder="长度1-30个汉字，回车换行"
              v-model="pageData.creativeTitleContent"
            ></el-input>
            <el-button
              type="primary"
              style="margin-left: 10px"
              @click="generateCreativeTitle"
              >生成标题</el-button
            >
            <!-- <el-input  
          class="u-w350"
          v-model="pageData.slogan"
          maxlength="30"
          ></el-input>-->
            <div v-for="(item, index) in pageData.creativeTitle" :key="index">
              <el-form-item label class="u-mt15">
                <el-input
                  class="u-w350"
                  placeholder="1-30个汉字"
                  :disabled="true"
                  :value="item"
                  maxlength="30"
                ></el-input>
                <el-button
                  style="margin-left: 10px"
                  @click="deleteCreativeTitle(index)"
                  >删除</el-button
                >
              </el-form-item>
            </div>
          </el-form-item>
          <ContainerTitle>试玩素材</ContainerTitle>
          <el-form-item label="搭配试玩">
            <el-radio-group v-model="pageData.collocationType">
              <el-radio-button :label="0">不启用</el-radio-button>
              <el-radio-button :label="1">启用</el-radio-button>
              <!--  <el-radio-button :label="3">自定义</el-radio-button> -->
            </el-radio-group>
          </el-form-item>
          <el-form-item label="选择试玩" v-if="pageData.collocationType == 1">
            <div v-for="(item, index) in pageData.groupList" :key="index">
              <div>{{ item.accountName }}</div>
              <el-button
                type="primary"
                @click="goChooseMaterial(item.accountId, item.playableInfo)"
                >选择试玩素材</el-button
              >
              <span class="u-ml10" v-if="item.playableInfo"
                >已选择{{ item.playableInfo.length }}个素材</span
              >
            </div>
          </el-form-item>
        </div>
        <div id="div3">
          <ContainerTitle>广告计划</ContainerTitle>
          <ContainerTitle class="font-size-defult">投放目标</ContainerTitle>
          <el-form-item label="下载方式">
            <el-radio-group v-model="pageData.downloadType">
              <el-radio-button :label="1" v-if="pageData.tgmd == 0"
                >安卓下载链接</el-radio-button
              >
              <el-radio-button :label="2" v-if="pageData.tgmd == 0">
                ios下载链接</el-radio-button
              >
              <el-radio-button :label="3">落地页</el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="投放目标设置方式">
            <el-radio-group
              v-model="pageData.tfSettingType"
              @change="toSetTfType"
            >
              <el-radio-button :label="0">分账户设置</el-radio-button>
              <el-radio-button :label="1">分计划设置</el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item>
            <div
              class="bg-purple-light text-info u-mt15 u-w350"
              v-if="pageData.tfSettingType == 0"
            >
              1、此字段为分账户配置，请先选择投放账户<br />
              2、设置成功后，单账户下生成的所有计划投放目标模块内容相同
            </div>
            <div
              class="bg-purple-light text-info u-mt15 u-w350"
              v-if="pageData.tfSettingType == 1"
            >
              1、此字段为分计划配置，请先选择上传素材<br />
              2、设置成功后，单账户下生成的所有计划投放目标模块内容相同
            </div>
          </el-form-item>
          <div v-if="pageData.tfSettingType == 0">
            <div v-for="(item, index) in pageData.groupList" :key="index">
              <el-form-item>{{ item.accountName }}</el-form-item>
              <el-form-item label="投放目标">
                <el-radio-group v-model="item.targetSetting[0].pricing">
                  <el-radio-button :label="'PRICING_OCPM'"
                    >转化量</el-radio-button
                  >
                  <!-- <el-radio-button :label="'OCPM'">点击量</el-radio-button> -->
                </el-radio-group>
              </el-form-item>
              <el-form-item
                label="下载链接填写方式"
                v-if="pageData.downloadType !== 3"
              >
                <el-radio-group
                  v-model="item.targetSetting[0].download_url_type"
                >
                  <el-radio-button :label="0">自定义</el-radio-button>
                  <el-radio-button :label="1">选择已有</el-radio-button>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="下载链接" v-if="pageData.downloadType !== 3">
                <!-- <el-radio-group v-model="item.downloadUrlType">
                  <el-radio-button :label="0">已有链接</el-radio-button>
                  <el-radio-button :label="1">自定义</el-radio-button>
                </el-radio-group> -->
                <el-input
                  class="u-w350"
                  type="textarea"
                  v-model="item.targetSetting[0].download_url"
                  v-if="item.targetSetting[0].download_url_type == 0"
                  placeholder="下载链接"
                ></el-input>
                <el-select
                  v-model="item.targetSetting[0].download_url"
                  placeholder="请选择下载链接"
                  v-else
                  class="u-w350"
                  @change="
                    selectDownloadUrl(item, item.targetSetting[0].download_url)
                  "
                >
                  <el-option
                    v-for="(item, dindex) in downloadUrlOptions"
                    :key="dindex"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item v-if="pageData.downloadType !== 3">
                <el-checkbox
                  v-model="item.isFirst"
                  @change="toSelectFirst(item, index)"
                  >优先从系统应用商店下载（请确保应用在应用商店内已上架)</el-checkbox
                >
                <div class="bg-purple-light text-info">
                  勾选后，将优先跳转目标应用对应手机系统应用商店安装详情页，跳转失败则使用下载链接下载。
                </div>
              </el-form-item>
              <el-form-item
                label="转化目标"
                v-if="item.targetSetting[0].pricing == 'PRICING_OCPM'"
              >
                <!-- <el-button type="primary">选择转化目标</el-button> -->
                <el-select
                  class="u-w350"
                  placeholder="请选择转化目标"
                  filterable
                  v-model="item.targetSetting[0].convert_id"
                >
                  <el-option
                    v-for="items in item.convertList"
                    :key="items.id"
                    :label="items.name"
                    :value="items.id"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item
                label="落地页链接"
                v-if="pageData.downloadType == 3"
              >
                <el-input
                  class="u-w350"
                  type="textarea"
                  v-model="item.targetSetting[0].external_url"
                  placeholder="应用直达链接"
                ></el-input>
              </el-form-item>
              <el-form-item
                label="应用直达链接"
                v-if="pageData.downloadType == 3"
              >
                <el-input
                  class="u-w350"
                  type="textarea"
                  v-model="item.targetSetting[0].open_url"
                  placeholder="应用直达链接"
                ></el-input>
              </el-form-item>
              <el-form-item label="应用包名" v-if="pageData.downloadType !== 3">
                <!-- <el-radio-group v-model="pageData.packageNameType">
                  <el-radio-button :label="0">已有包名</el-radio-button>
                  <el-radio-button :label="1">自定义</el-radio-button>
                </el-radio-group> -->
                <el-input
                  class="u-w350"
                  type="textarea"
                  v-model="item.targetSetting[0].packages"
                  placeholder="请填写应用包名"
                ></el-input>
              </el-form-item>
            </div>
          </div>
          <div v-else>
            <div v-for="(item, index) in pageData.planGroupList" :key="index">
              <el-form-item
                >{{ item.accountName }}&nbsp;视频名称{{ item.fileName }}&nbsp;{{
                  item.playable_name
                }}</el-form-item
              >
              <el-form-item label="投放目标">
                <el-radio-group v-model="item.targetSetting[0].pricing">
                  <el-radio-button :label="'PRICING_OCPM'"
                    >转化量</el-radio-button
                  >
                  <!-- <el-radio-button :label="'OCPM'">点击量</el-radio-button> -->
                </el-radio-group>
              </el-form-item>
              <el-form-item
                label="下载链接填写方式"
                v-if="pageData.downloadType !== 3"
              >
                <el-radio-group
                  v-model="item.targetSetting[0].download_url_type"
                >
                  <el-radio-button :label="0">自定义</el-radio-button>
                  <el-radio-button :label="1">选择已有</el-radio-button>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="下载链接" v-if="pageData.downloadType !== 3">
                <!-- <el-radio-group v-model="item.downloadUrlType">
                  <el-radio-button :label="0">已有链接</el-radio-button>
                  <el-radio-button :label="1">自定义</el-radio-button>
                </el-radio-group> -->
                <el-input
                  class="u-w350"
                  type="textarea"
                  v-model="item.targetSetting[0].download_url"
                  v-if="item.targetSetting[0].download_url_type == 0"
                  placeholder="下载链接"
                ></el-input>
                <el-select
                  v-model="item.targetSetting[0].download_url"
                  placeholder="请选择下载链接"
                  v-else
                  class="u-w350"
                  @change="
                    selectDownloadUrl(item, item.targetSetting[0].download_url)
                  "
                >
                  <el-option
                    v-for="(item, dindex) in downloadUrlOptions"
                    :key="dindex"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item v-if="pageData.downloadType !== 3">
                <el-checkbox
                  v-model="item.isFirst"
                  @change="toSelectFirst(item, index)"
                  >优先从系统应用商店下载（请确保应用在应用商店内已上架)</el-checkbox
                >
                <div class="bg-purple-light text-info">
                  勾选后，将优先跳转目标应用对应手机系统应用商店安装详情页，跳转失败则使用下载链接下载。
                </div>
              </el-form-item>
              <el-form-item
                label="转化目标"
                v-if="item.targetSetting[0].pricing == 'PRICING_OCPM'"
              >
                <!-- <el-button type="primary">选择转化目标</el-button> -->
                <el-select
                  class="u-w350"
                  placeholder="请选择转化目标"
                  filterable
                  v-model="item.targetSetting[0].convert_id"
                >
                  <el-option
                    v-for="items in item.convertList"
                    :key="items.id"
                    :label="items.name"
                    :value="items.id"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item
                label="落地页链接"
                v-if="pageData.downloadType == 3"
              >
                <el-input
                  class="u-w350"
                  type="textarea"
                  v-model="item.targetSetting[0].external_url"
                  placeholder="应用直达链接"
                ></el-input>
              </el-form-item>
              <el-form-item
                label="应用直达链接"
                v-if="pageData.downloadType == 3"
              >
                <el-input
                  class="u-w350"
                  type="textarea"
                  v-model="item.targetSetting[0].open_url"
                  placeholder="应用直达链接"
                ></el-input>
              </el-form-item>
              <el-form-item label="应用包名" v-if="pageData.downloadType !== 3">
                <!-- <el-radio-group v-model="pageData.packageNameType">
                  <el-radio-button :label="0">已有包名</el-radio-button>
                  <el-radio-button :label="1">自定义</el-radio-button>
                </el-radio-group> -->
                <el-input
                  class="u-w350"
                  type="textarea"
                  v-model="item.targetSetting[0].packages"
                  placeholder="请填写应用包名"
                ></el-input>
              </el-form-item>
            </div>
          </div>
          <ContainerTitle class="font-size-defult">预算与出价</ContainerTitle>
          <el-form-item label="预算与出价设置方式">
            <el-radio-group v-model="pageData.offerType">
              <el-radio-button :label="0">统一设置</el-radio-button>
              <el-radio-button :label="1" v-if="pageData.tfSettingType == 0"
                >分账户设置</el-radio-button
              >
              <el-radio-button :label="2" v-if="pageData.tfSettingType == 1"
                >分计划设置</el-radio-button
              >
            </el-radio-group>
            <div class="bg-purple-light text-info u-mt15 u-w350">
              1、统一设置：请确认所有选择账户，广告计划-投放目标
              选择一致。如投放目标不一致，不可统一设置出价，否则创建失败<br />
              2、根据 广告计划-投放目标 确定此模块为 分账户设置或分计划设置<br />
              3、分账户配置，请先选择投放账户<br />
              4、分账户设置成功后，单账户下生成的所有计划此模块内容相同
            </div>
          </el-form-item>
          <div v-if="pageData.offerType == 0">
            <el-form-item label="投放场景">
              <el-radio-group v-model="pageData.scene" @change="chageScene">
                <el-radio-button :label="0">常规投放</el-radio-button>
                <el-radio-button :label="1">放量投放</el-radio-button>
              </el-radio-group>
              <div v-if="pageData.scene == 1">
                <!--             <el-radio v-model="pageData.yxzh">通过学习期后，尝试优化转化成本</el-radio> -->
                <el-checkbox v-model="pageData.yxzh" @change="selectConversion"
                  >通过学习期后，尝试优化转化成本</el-checkbox
                >
              </div>
            </el-form-item>
            <el-form-item label="竞价策略" v-if="pageData.scene == 0">
              <el-radio-group v-model="pageData.flow_control_mode">
                <el-radio-button :label="'FLOW_CONTROL_MODE_FAST'"
                  >优先跑量</el-radio-button
                >
                <el-radio-button :label="'FLOW_CONTROL_MODE_SMOOTH'"
                  >优先低成本</el-radio-button
                >
                <el-radio-button :label="'FLOW_CONTROL_MODE_BALANCE'"
                  >均衡投放</el-radio-button
                >
              </el-radio-group>
              <div class="bg-purple-light text-info u-mt15">
                尽可能的将广告投放出去，可能会在较短的时间内消耗完预算，也会因为竞争环境的变化导致预算消耗出现较大的波动
              </div>
            </el-form-item>
            <el-form-item label="预算类型" prop="budgetAmount">
              <el-radio-group v-model="pageData.budget_mode">
                <el-radio-button :label="'BUDGET_MODE_DAY'"
                  >日预算</el-radio-button
                >
                <el-radio-button
                  :label="'BUDGET_MODE_TOTAL'"
                  v-if="pageData.scene !== 1"
                  >总预算</el-radio-button
                >
              </el-radio-group>
              <div class="u-mt15">
                <el-input
                  class="u-w350"
                  placeholder="请输入预算"
                  v-model="pageData.budgetAmount"
                  rows="5"
                  onkeyup="this.value = this.value.replace(/[^\d.]/g,'')"
                  maxlength="200"
                ></el-input>
              </div>
            </el-form-item>
            <el-form-item>
              <div class="bg-purple-light text-info u-mt15">
                <div>
                  1、日预算范围（单位元）
                  <div>①出价方式为CPC、CPM、CPV时，日预算需大于100元</div>
                  <div>②出价方式为OCPM、OCPC时，日预算需大于300元</div>
                </div>
                <div>
                  2、总预算范围（单位元））
                  <div>
                    总预算：设了起始日期，将要求您预算设置需要大于或等于[投放天数
                    * 100]，即满足每日最低预算300的要求
                  </div>
                </div>
                <div>
                  <div>3、单次预算修改幅度不小于100元</div>
                  <div>4、日修改预算不超过20次</div>
                </div>
              </div>
            </el-form-item>
            <el-form-item label="投放时间">
              <!--  <div class="u-black">从今天开始长期投放</div> -->
              <el-radio-group
                v-model="pageData.launchDateType"
                @change="changeDateType"
              >
                <el-radio-button :label="1">从今天开始长期投放</el-radio-button>
                <el-radio-button :label="2">选择投放时间</el-radio-button>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="投放时间" v-if="pageData.launchDateType == 2">
              <el-date-picker
                class="u-w330"
                v-model="dateValue"
                size="mini"
                type="daterange"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @change="dateChange"
                format="yyyy/MM/dd"
                :picker-options="$store.state.PICKER_OPTIONS"
              ></el-date-picker>
            </el-form-item>
            <el-form-item label="投放时段">
              <el-radio-group v-model="pageData.launchPeriodType">
                <el-radio-button :label="1">不限</el-radio-button>
                <el-radio-button :label="2">指定时段</el-radio-button>
              </el-radio-group>
              <DropTime
                v-show="pageData.launchPeriodType === 2"
                :disabled="['detail'].indexOf(pageAction) !== -1"
                :value.sync="pageData.launchPeriod"
                @change="scheduleWeekChange"
                class="u-mt10"
              ></DropTime>
            </el-form-item>
            <el-form-item label="付费方式">
              <div class="u-black">OCPM</div>
            </el-form-item>
            <div
              v-for="(item, index) in pageData.conversionList"
              :key="index"
              class="u-mt15"
              style="border-bottom: 1px solid #eeeeee"
            >
              <el-form-item label="调整自动出价" v-if="pageData.scene == 1">
                <el-checkbox v-model="item.isAuto"
                  >是否手动调整自动出价</el-checkbox
                >
                <el-button
                  size="medium"
                  type="primary"
                  style="margin-left: 10px"
                  @click="addConversionb(index)"
                  v-if="pageData.scene == 1"
                  >添加</el-button
                >
                <el-button
                  size="medium"
                  style="margin-left: 10px"
                  @click="deleteConversionb(index)"
                  v-if="pageData.scene == 1 && index !== 0"
                  >删除</el-button
                >
              </el-form-item>
              <el-form-item
                label="目标转化出价(元)"
                :prop="'conversionList.' + index + '.targetconversionbid'"
                :rules="pageRules.targetconversionbid"
                v-if="pageData.scene == 0"
              >
                <el-input
                  class="u-w350"
                  placeholder="请输入目标转化出价"
                  v-model="item.targetconversionbid"
                  rows="5"
                  maxlength="200"
                  onkeyup="this.value = this.value.replace(/[^\d.]/g,'')"
                  @blur="calculationRate(index)"
                ></el-input>
                <!--                 <el-button
                  size="medium"
                  type="primary"
                  style="margin-left: 10px"
                  @click="addConversionb(index)"
                  >添加</el-button
                >
                <el-button
                  size="medium"
                  style="margin-left: 10px"
                  @click="deleteConversionb(index)"
                  v-if="index !== 0"
                  >删除</el-button
                > -->
              </el-form-item>
              <el-form-item
                label="目标转化出价(元)"
                :prop="'conversionList.' + index + '.targetconversionbid'"
                :rules="pageRules.targetconversionbid"
                v-if="pageData.scene == 1 && item.isAuto"
              >
                <el-input
                  class="u-w350"
                  placeholder="请输入目标转化出价"
                  v-model="item.targetconversionbid"
                  rows="5"
                  maxlength="200"
                  onkeyup="this.value = this.value.replace(/[^\d.]/g,'')"
                  @blur="calculationRate(index)"
                ></el-input>
                <el-button
                  size="medium"
                  type="primary"
                  style="margin-left: 10px"
                  @click="addConversionb(index)"
                  v-if="pageData.scene == 0"
                  >添加</el-button
                >
                <el-button
                  size="medium"
                  style="margin-left: 10px"
                  @click="deleteConversionb(index)"
                  v-if="pageData.scene == 0 && index !== 0"
                  >删除</el-button
                >
              </el-form-item>
              <el-form-item>
                <div class="bg-purple-light text-info">
                  出价范围（单位元）：【CPC ：0.2-100】【CPM ：4-100】【CPV
                  ：0.07-100】【OCPM、OCPC(穿山甲)、CPA：0.1-1000】
                </div>
              </el-form-item>
              <el-form-item label="深度优化方式">
                <div class="u-black">自动出价</div>
              </el-form-item>
              <el-form-item
                label="深度转化出价"
                :prop="'conversionList.' + index + '.deepconversionbid'"
                :rules="pageRules.deepconversionbid"
                v-if="pageData.scene == 0"
              >
                <el-input
                  class="u-w350"
                  placeholder="请输入深度转化出价"
                  v-model="item.deepconversionbid"
                  rows="5"
                  maxlength="200"
                  onkeyup="this.value = this.value.replace(/[^\d.]/g,'')"
                  @blur="calculationRate(index)"
                ></el-input>
                <div class="u-mt15">
                  深度转化率={{ item.deepconversionrate }}%
                </div>
              </el-form-item>
              <el-form-item
                label="深度转化出价"
                :prop="'conversionList.' + index + '.deepconversionbid'"
                :rules="pageRules.deepconversionbid"
                v-if="pageData.scene == 1 && item.isAuto"
              >
                <el-input
                  class="u-w350"
                  placeholder="请输入深度转化出价"
                  v-model="item.deepconversionbid"
                  rows="5"
                  maxlength="200"
                  onkeyup="this.value = this.value.replace(/[^\d.]/g,'')"
                  @blur="calculationRate(index)"
                ></el-input>
                <div class="u-mt15">
                  深度转化率={{ item.deepconversionrate }}%
                </div>
              </el-form-item>
            </div>
          </div>
          <div v-if="pageData.offerType == 1">
            <div v-for="(item, index) in pageData.groupList" :key="index">
              <el-form-item class="u-mt10"
                ><div>账户名称：{{ item.accountName }}</div></el-form-item
              >
              <el-form-item label="投放场景">
                <el-radio-group
                  v-model="item.budgetBid[0].smart_bid_type"
                  @change="chageScene"
                >
                  <el-radio-button :label="'SMART_BID_CUSTOM'"
                    >常规投放</el-radio-button
                  >
                  <el-radio-button :label="'SMART_BID_CONSERVATIVE'"
                    >放量投放</el-radio-button
                  >
                </el-radio-group>
                <div
                  v-if="
                    item.budgetBid[0].smart_bid_type == 'SMART_BID_CONSERVATIVE'
                  "
                >
                  <!--             <el-radio v-model="pageData.yxzh">通过学习期后，尝试优化转化成本</el-radio> -->
                  <el-checkbox v-model="item.yxzh" @change="selectConversion"
                    >通过学习期后，尝试优化转化成本</el-checkbox
                  >
                </div>
              </el-form-item>
              <el-form-item
                label="竞价策略"
                v-if="item.budgetBid[0].smart_bid_type == 'SMART_BID_CUSTOM'"
              >
                <el-radio-group v-model="item.budgetBid[0].flow_control_mode">
                  <el-radio-button :label="'FLOW_CONTROL_MODE_FAST'"
                    >优先跑量</el-radio-button
                  >
                  <el-radio-button :label="'FLOW_CONTROL_MODE_SMOOTH'"
                    >优先低成本</el-radio-button
                  >
                  <el-radio-button :label="'FLOW_CONTROL_MODE_BALANCE'"
                    >均衡投放</el-radio-button
                  >
                </el-radio-group>
                <div class="bg-purple-light text-info u-mt15">
                  尽可能的将广告投放出去，可能会在较短的时间内消耗完预算，也会因为竞争环境的变化导致预算消耗出现较大的波动
                </div>
              </el-form-item>
              <el-form-item label="预算类型">
                <el-radio-group v-model="item.budgetBid[0].budget_mode">
                  <el-radio-button :label="'BUDGET_MODE_DAY'"
                    >日预算</el-radio-button
                  >
                  <el-radio-button
                    :label="'BUDGET_MODE_TOTAL'"
                    v-if="
                      item.budgetBid[0].smart_bid_type !==
                      'SMART_BID_CONSERVATIVE'
                    "
                    >总预算</el-radio-button
                  >
                </el-radio-group>
                <div class="u-mt15">
                  <el-input
                    class="u-w350"
                    placeholder="请输入预算"
                    v-model="item.budgetBid[0].budget"
                    rows="5"
                    onkeyup="this.value = this.value.replace(/[^\d.]/g,'')"
                    maxlength="200"
                  ></el-input>
                </div>
              </el-form-item>
              <el-form-item>
                <div class="bg-purple-light text-info u-mt15">
                  <div>
                    1、日预算范围（单位元）
                    <div>①出价方式为CPC、CPM、CPV时，日预算需大于100元</div>
                    <div>②出价方式为OCPM、OCPC时，日预算需大于300元</div>
                  </div>
                  <div>
                    2、总预算范围（单位元））
                    <div>
                      总预算：设了起始日期，将要求您预算设置需要大于或等于[投放天数
                      * 100]，即满足每日最低预算300的要求
                    </div>
                  </div>
                  <div>
                    <div>3、单次预算修改幅度不小于100元</div>
                    <div>4、日修改预算不超过20次</div>
                  </div>
                </div>
              </el-form-item>
              <el-form-item label="投放时间">
                <!--  <div class="u-black">从今天开始长期投放</div> -->
                <el-radio-group
                  v-model="item.budgetBid[0].schedule_type"
                  @change="changeDateType"
                >
                  <el-radio-button :label="'SCHEDULE_FROM_NOW'"
                    >从今天开始长期投放</el-radio-button
                  >
                  <el-radio-button :label="'SCHEDULE_START_END'"
                    >选择投放时间</el-radio-button
                  >
                </el-radio-group>
              </el-form-item>
              <el-form-item
                label="投放时间"
                v-if="item.budgetBid[0].schedule_type == 'SCHEDULE_START_END'"
              >
                <el-date-picker
                  class="u-w330"
                  v-model="item.dateValue"
                  size="mini"
                  type="daterange"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  @change="(value) => dateChange(value, index, 1)"
                  format="yyyy/MM/dd"
                  :picker-options="$store.state.PICKER_OPTIONS"
                ></el-date-picker>
              </el-form-item>
              <el-form-item label="投放时段">
                <el-radio-group v-model="item.budgetBid[0].launchPeriodType">
                  <el-radio-button :label="1">不限</el-radio-button>
                  <el-radio-button :label="2">指定时段</el-radio-button>
                </el-radio-group>
                <DropTime
                  v-show="item.budgetBid[0].launchPeriodType === 2"
                  :disabled="['detail'].indexOf(pageAction) !== -1"
                  :value.sync="item.budgetBid[0].schedule_time"
                  @change="scheduleWeekChange"
                  class="u-mt10"
                ></DropTime>
              </el-form-item>
              <el-form-item label="付费方式">
                <div class="u-black">OCPM</div>
              </el-form-item>
              <div
                v-for="(items, indexs) in item.conversionList"
                :key="indexs"
                class="u-mt15"
                style="border-bottom: 1px solid #eeeeee"
              >
                <el-form-item
                  label="调整自动出价"
                  v-if="
                    item.budgetBid[0].smart_bid_type == 'SMART_BID_CONSERVATIVE'
                  "
                >
                  <el-checkbox v-model="items.isAuto"
                    >是否手动调整自动出价</el-checkbox
                  >
                  <!--  <el-button
                    size="medium"
                    type="primary"
                    style="margin-left: 10px"
                    @click="addConversionb(indexs)"
                    v-if="
                      item.budgetBid.smart_bid_type == 'SMART_BID_CONSERVATIVE'
                    "
                    >添加</el-button
                  >
                  <el-button
                    size="medium"
                    style="margin-left: 10px"
                    @click="deleteConversionb(indexs)"
                    v-if="
                      item.budgetBid.smart_bid_type ==
                        'SMART_BID_CONSERVATIVE' && indexs !== 0
                    "
                    >删除</el-button
                  > -->
                </el-form-item>
                <el-form-item
                  label="目标转化出价(元)"
                  v-if="item.budgetBid[0].smart_bid_type == 'SMART_BID_CUSTOM'"
                >
                  <el-input
                    class="u-w350"
                    placeholder="请输入目标转化出价"
                    v-model="items.targetconversionbid"
                    rows="5"
                    maxlength="200"
                    onkeyup="this.value = this.value.replace(/[^\d.]/g,'')"
                    @blur="groupCalculationRate(items, indexs)"
                  ></el-input>
                  <!--                   <el-button
                    size="medium"
                    type="primary"
                    style="margin-left: 10px"
                    @click="addConversionb(index)"
                    >添加</el-button
                  >
                  <el-button
                    size="medium"
                    style="margin-left: 10px"
                    @click="deleteConversionb(index)"
                    v-if="index !== 0"
                    >删除</el-button
                  > -->
                </el-form-item>
                <el-form-item
                  label="目标转化出价(元)"
                  v-if="
                    item.budgetBid[0].smart_bid_type ==
                      'SMART_BID_CONSERVATIVE' && items.isAuto
                  "
                >
                  <el-input
                    class="u-w350"
                    placeholder="请输入目标转化出价"
                    v-model="items.targetconversionbid"
                    rows="5"
                    maxlength="200"
                    onkeyup="this.value = this.value.replace(/[^\d.]/g,'')"
                    @blur="groupCalculationRate(items, indexs)"
                  ></el-input>
                  <!--                   <el-button
                    size="medium"
                    type="primary"
                    style="margin-left: 10px"
                    @click="addConversionb(index)"
                    v-if="item.budgetBid.smart_bid_type == 'SMART_BID_CUSTOM'"
                    >添加</el-button
                  >
                  <el-button
                    size="medium"
                    style="margin-left: 10px"
                    @click="deleteConversionb(index)"
                    v-if="pageData.scene == 'SMART_BID_CUSTOM' && indexs !== 0"
                    >删除</el-button
                  > -->
                </el-form-item>
                <el-form-item>
                  <div class="bg-purple-light text-info">
                    出价范围（单位元）：【CPC ：0.2-100】【CPM ：4-100】【CPV
                    ：0.07-100】【OCPM、OCPC(穿山甲)、CPA：0.1-1000】
                  </div>
                </el-form-item>
                <el-form-item label="深度优化方式">
                  <div class="u-black">自动出价</div>
                </el-form-item>
                <el-form-item
                  label="深度转化出价"
                  v-if="item.budgetBid[0].smart_bid_type == 'SMART_BID_CUSTOM'"
                >
                  <el-input
                    class="u-w350"
                    placeholder="请输入深度转化出价"
                    v-model="items.deepconversionbid"
                    rows="5"
                    maxlength="200"
                    onkeyup="this.value = this.value.replace(/[^\d.]/g,'')"
                    @blur="groupCalculationRate(items, indexs)"
                  ></el-input>
                  <div class="u-mt15">
                    深度转化率={{ items.deepconversionrate }}%
                  </div>
                </el-form-item>
                <el-form-item
                  label="深度转化出价"
                  v-if="
                    item.budgetBid[0].smart_bid_type ==
                      'SMART_BID_CONSERVATIVE' && items.isAuto
                  "
                >
                  <el-input
                    class="u-w350"
                    placeholder="请输入深度转化出价"
                    v-model="items.deepconversionbid"
                    rows="5"
                    maxlength="200"
                    onkeyup="this.value = this.value.replace(/[^\d.]/g,'')"
                    @blur="groupCalculationRate(items, indexs)"
                  ></el-input>
                  <div class="u-mt15">
                    深度转化率={{ items.deepconversionrate }}%
                  </div>
                </el-form-item>
              </div>
            </div>
          </div>
          <div v-if="pageData.offerType == 2">
            <div v-for="(item, index) in pageData.planGroupList" :key="index">
              <el-form-item class="u-mt10"
                ><div>
                  账户名称：{{ item.accountName }}&nbsp;{{ item.fileName }}
                </div></el-form-item
              >
              <el-form-item label="投放场景">
                <el-radio-group
                  v-model="item.budgetBid[0].smart_bid_type"
                  @change="chageScene"
                >
                  <el-radio-button :label="'SMART_BID_CUSTOM'"
                    >常规投放</el-radio-button
                  >
                  <el-radio-button :label="'SMART_BID_CONSERVATIVE'"
                    >放量投放</el-radio-button
                  >
                </el-radio-group>
                <div
                  v-if="
                    item.budgetBid[0].smart_bid_type == 'SMART_BID_CONSERVATIVE'
                  "
                >
                  <!--             <el-radio v-model="pageData.yxzh">通过学习期后，尝试优化转化成本</el-radio> -->
                  <el-checkbox v-model="item.yxzh" @change="selectConversion"
                    >通过学习期后，尝试优化转化成本</el-checkbox
                  >
                </div>
              </el-form-item>
              <el-form-item
                label="竞价策略"
                v-if="item.budgetBid[0].smart_bid_type == 'SMART_BID_CUSTOM'"
              >
                <el-radio-group v-model="item.budgetBid[0].flow_control_mode">
                  <el-radio-button :label="'FLOW_CONTROL_MODE_FAST'"
                    >优先跑量</el-radio-button
                  >
                  <el-radio-button :label="'FLOW_CONTROL_MODE_SMOOTH'"
                    >优先低成本</el-radio-button
                  >
                  <el-radio-button :label="'FLOW_CONTROL_MODE_BALANCE'"
                    >均衡投放</el-radio-button
                  >
                </el-radio-group>
                <div class="bg-purple-light text-info u-mt15">
                  尽可能的将广告投放出去，可能会在较短的时间内消耗完预算，也会因为竞争环境的变化导致预算消耗出现较大的波动
                </div>
              </el-form-item>
              <el-form-item label="预算类型">
                <el-radio-group v-model="item.budgetBid[0].budget_mode">
                  <el-radio-button :label="'BUDGET_MODE_DAY'"
                    >日预算</el-radio-button
                  >
                  <el-radio-button
                    :label="'BUDGET_MODE_TOTAL'"
                    v-if="
                      item.budgetBid[0].smart_bid_type !==
                      'SMART_BID_CONSERVATIVE'
                    "
                    >总预算</el-radio-button
                  >
                </el-radio-group>
                <div class="u-mt15">
                  <el-input
                    class="u-w350"
                    placeholder="请输入预算"
                    v-model="item.budgetBid[0].budget"
                    rows="5"
                    onkeyup="this.value = this.value.replace(/[^\d.]/g,'')"
                    maxlength="200"
                  ></el-input>
                </div>
              </el-form-item>
              <el-form-item>
                <div class="bg-purple-light text-info u-mt15">
                  <div>
                    1、日预算范围（单位元）
                    <div>①出价方式为CPC、CPM、CPV时，日预算需大于100元</div>
                    <div>②出价方式为OCPM、OCPC时，日预算需大于300元</div>
                  </div>
                  <div>
                    2、总预算范围（单位元））
                    <div>
                      总预算：设了起始日期，将要求您预算设置需要大于或等于[投放天数
                      * 100]，即满足每日最低预算300的要求
                    </div>
                  </div>
                  <div>
                    <div>3、单次预算修改幅度不小于100元</div>
                    <div>4、日修改预算不超过20次</div>
                  </div>
                </div>
              </el-form-item>
              <el-form-item label="投放时间">
                <!--  <div class="u-black">从今天开始长期投放</div> -->
                <el-radio-group
                  v-model="item.budgetBid[0].schedule_type"
                  @change="changeDateType"
                >
                  <el-radio-button :label="'SCHEDULE_FROM_NOW'"
                    >从今天开始长期投放</el-radio-button
                  >
                  <el-radio-button :label="'SCHEDULE_START_END'"
                    >选择投放时间</el-radio-button
                  >
                </el-radio-group>
              </el-form-item>
              <el-form-item
                label="投放时间"
                v-if="item.budgetBid[0].schedule_type == 'SCHEDULE_START_END'"
              >
                <el-date-picker
                  class="u-w330"
                  v-model="item.dateValue"
                  size="mini"
                  type="daterange"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  @change="(value) => dateChange(value, index, 2)"
                  format="yyyy/MM/dd"
                  :picker-options="$store.state.PICKER_OPTIONS"
                ></el-date-picker>
              </el-form-item>
              <el-form-item label="投放时段">
                <el-radio-group v-model="item.budgetBid[0].launchPeriodType">
                  <el-radio-button :label="1">不限</el-radio-button>
                  <el-radio-button :label="2"
                    >指定时段</el-radio-button
                  > </el-radio-group
                >''
                <DropTime
                  v-show="item.budgetBid[0].launchPeriodType === 2"
                  :disabled="['detail'].indexOf(pageAction) !== -1"
                  :value.sync="item.budgetBid[0].schedule_time"
                  @change="scheduleWeekChange"
                  class="u-mt10"
                ></DropTime>
              </el-form-item>
              <el-form-item label="付费方式">
                <div class="u-black">OCPM</div>
              </el-form-item>
              <div
                v-for="(items, indexs) in item.conversionList"
                :key="indexs"
                class="u-mt15"
                style="border-bottom: 1px solid #eeeeee"
              >
                <el-form-item
                  label="调整自动出价"
                  v-if="
                    item.budgetBid[0].smart_bid_type == 'SMART_BID_CONSERVATIVE'
                  "
                >
                  <el-checkbox v-model="items.isAuto"
                    >是否手动调整自动出价</el-checkbox
                  >
                  <!--  <el-button
                    size="medium"
                    type="primary"
                    style="margin-left: 10px"
                    @click="addConversionb(indexs)"
                    v-if="
                      item.budgetBid.smart_bid_type == 'SMART_BID_CONSERVATIVE'
                    "
                    >添加</el-button
                  >
                  <el-button
                    size="medium"
                    style="margin-left: 10px"
                    @click="deleteConversionb(indexs)"
                    v-if="
                      item.budgetBid.smart_bid_type ==
                        'SMART_BID_CONSERVATIVE' && indexs !== 0
                    "
                    >删除</el-button
                  > -->
                </el-form-item>
                <el-form-item
                  label="目标转化出价(元)"
                  v-if="item.budgetBid[0].smart_bid_type == 'SMART_BID_CUSTOM'"
                >
                  <el-input
                    class="u-w350"
                    placeholder="请输入目标转化出价"
                    v-model="items.targetconversionbid"
                    rows="5"
                    maxlength="200"
                    onkeyup="this.value = this.value.replace(/[^\d.]/g,'')"
                    @blur="groupCalculationRate(items, indexs)"
                  ></el-input>
                  <!--                   <el-button
                    size="medium"
                    type="primary"
                    style="margin-left: 10px"
                    @click="addConversionb(index)"
                    >添加</el-button
                  >
                  <el-button
                    size="medium"
                    style="margin-left: 10px"
                    @click="deleteConversionb(index)"
                    v-if="index !== 0"
                    >删除</el-button
                  > -->
                </el-form-item>
                <el-form-item
                  label="目标转化出价(元)"
                  v-if="
                    item.budgetBid[0].smart_bid_type ==
                      'SMART_BID_CONSERVATIVE' && items.isAuto
                  "
                >
                  <el-input
                    class="u-w350"
                    placeholder="请输入目标转化出价"
                    v-model="items.targetconversionbid"
                    rows="5"
                    maxlength="200"
                    onkeyup="this.value = this.value.replace(/[^\d.]/g,'')"
                    @blur="groupCalculationRate(items, indexs)"
                  ></el-input>
                  <!--                   <el-button
                    size="medium"
                    type="primary"
                    style="margin-left: 10px"
                    @click="addConversionb(index)"
                    v-if="item.budgetBid.smart_bid_type == 'SMART_BID_CUSTOM'"
                    >添加</el-button
                  >
                  <el-button
                    size="medium"
                    style="margin-left: 10px"
                    @click="deleteConversionb(index)"
                    v-if="pageData.scene == 'SMART_BID_CUSTOM' && indexs !== 0"
                    >删除</el-button
                  > -->
                </el-form-item>
                <el-form-item>
                  <div class="bg-purple-light text-info">
                    出价范围（单位元）：【CPC ：0.2-100】【CPM ：4-100】【CPV
                    ：0.07-100】【OCPM、OCPC(穿山甲)、CPA：0.1-1000】
                  </div>
                </el-form-item>
                <el-form-item label="深度优化方式">
                  <div class="u-black">自定义双出价</div>
                </el-form-item>
                <el-form-item
                  label="深度转化出价"
                  v-if="item.budgetBid[0].smart_bid_type == 'SMART_BID_CUSTOM'"
                >
                  <el-input
                    class="u-w350"
                    placeholder="请输入深度转化出价"
                    v-model="items.deepconversionbid"
                    rows="5"
                    maxlength="200"
                    onkeyup="this.value = this.value.replace(/[^\d.]/g,'')"
                    @blur="groupCalculationRate(items, indexs)"
                  ></el-input>
                  <div class="u-mt15">
                    深度转化率={{ items.deepconversionrate }}%
                  </div>
                </el-form-item>
                <el-form-item
                  label="深度转化出价"
                  v-if="
                    item.budgetBid[0].smart_bid_type ==
                      'SMART_BID_CONSERVATIVE' && items.isAuto
                  "
                >
                  <el-input
                    class="u-w350"
                    placeholder="请输入深度转化出价"
                    v-model="items.deepconversionbid"
                    rows="5"
                    maxlength="200"
                    onkeyup="this.value = this.value.replace(/[^\d.]/g,'')"
                    @blur="groupCalculationRate(items, indexs)"
                  ></el-input>
                  <div class="u-mt15">
                    深度转化率={{ items.deepconversionrate }}%
                  </div>
                </el-form-item>
              </div>
            </div>
          </div>
          <div id="div4">
            <ContainerTitle>用户定向</ContainerTitle>
            <el-form-item label="选择定向目标">
              <el-button type="primary">头条定向模板</el-button>
            </el-form-item>
            <el-form-item label="头条定向模板">
              <!-- <el-button type="primary">头条定向模板</el-button> -->
              <div
                v-for="(item, index) in pageData.groupList"
                :key="index"
                class="u-mt15"
              >
                <div>账户名称：{{ item.accountName }}</div>
                <el-select
                  placeholder="请选择定向模板（手动选择+多选）"
                  v-model="item.audience_package"
                >
                  <el-option
                    v-for="items in item.deliveryRangeOptionList"
                    :key="items.audience_package_id"
                    :label="items.name"
                    :value="items.audience_package_id"
                  ></el-option>
                </el-select>
              </div>
            </el-form-item>
            <ContainerTitle class="font-size-defult">计划名称</ContainerTitle>
            <el-form-item label="设置方式">
              <el-button type="primary">分计划设置</el-button>
              <div class="bg-purple-light text-info u-mt15 u-w500">
                注意<br />
                1、分计划配置，请先 选择投放账户+上传投放素材<br />
                2、分计划设置成功后，单账户下生成的所有计划名称将分别配置<br />
                3、为避免设置重复，名称设置规则：手动输入+5位随机数
              </div>
            </el-form-item>
            <div>
              <el-form-item label="广告计划名称统一设置">
                <el-input
                  class="u-w350"
                  placeholder="1-40个汉字"
                  v-model="pageData.advPlanName"
                ></el-input>
                <el-button
                  type="primary"
                  style="margin-left: 10px"
                  @click="generateAdvPlanName"
                  >确定</el-button
                >
              </el-form-item>
              <el-form-item
                label="广告计划名称"
                v-for="(item, index) in pageData.planGroupList"
                :key="index"
              >
                <div>
                  {{ item.accountName }}&nbsp;视频名称{{
                    item.fileName
                  }}&nbsp;{{ item.playable_name }}
                </div>
                <el-input
                  class="u-w350"
                  placeholder="1-40个汉字"
                  v-model="item.name"
                  @input="changeAdvItemName"
                ></el-input>
              </el-form-item>
            </div>
          </div>
          <div id="div5">
            <ContainerTitle>广告创意</ContainerTitle>
            <ContainerTitle class="font-size-defult"
              >广告投放位置</ContainerTitle
            >
            <el-form-item label="位置设置方式">
              <el-button type="primary">统一设置</el-button>
              <div class="bg-purple-light text-info u-mt15 u-w500">
                1、统一配置成功后，所有投放账户创意投放位置相同
              </div>
            </el-form-item>
            <el-form-item label="广告投放位置">
              <el-radio-group
                v-model="pageData.advPosition"
                @change="changeAdvPosition"
              >
                <el-radio-button
                  :label="1"
                  v-if="pageData.delivery_range == 'DEFAULT'"
                  >优选广告位</el-radio-button
                >
                <el-radio-button :label="0">按媒体指定位置</el-radio-button>
                <!--  <el-radio-button :label="2">按场景指定位置</el-radio-button> -->
              </el-radio-group>
              <div
                class="bg-purple-light text-info u-mt15 u-w500"
                v-if="pageData.advPosition == 1"
              >
                系统将根据您设置的定向，选择预估效果最好的广告位进行投放，并触达尽可能多的目标用户
              </div>
              <div
                class="bg-purple-light text-info u-mt15 u-w500"
                v-if="pageData.advPosition == 2"
              >
                系统将结合用户使用场景，智能选择与目标用户场景契合的广告素材进行投放，并获得尽可能优的转化效果
              </div>
              <div v-if="pageData.advPosition == 2">
                <el-radio v-model="pageData.launchScenario" label="1"
                  >沉浸式竖版视频场景</el-radio
                >
                <el-radio v-model="pageData.launchScenario" label="2"
                  >信息流场景</el-radio
                >
                <el-radio v-model="pageData.launchScenario" label="3"
                  >视频后贴和尾帧场景</el-radio
                >
              </div>
            </el-form-item>
            <el-form-item
              prop="inventory_type"
              v-if="pageData.advPosition == 0"
            >
              <el-checkbox-group
                v-model="pageData.inventory_type"
                class="u-mt15"
                @change="changeinventoryType"
              >
                <el-checkbox
                  label="INVENTORY_FEED"
                  :disabled="pageData.delivery_range == 'UNION'"
                  >今日头条</el-checkbox
                >
                <el-checkbox
                  label="INVENTORY_VIDEO_FEED"
                  :disabled="pageData.delivery_range == 'UNION'"
                  >西瓜视频</el-checkbox
                >
                <el-checkbox
                  label="INVENTORY_HOTSOON_FEED"
                  :disabled="pageData.delivery_range == 'UNION'"
                  >抖音火山版</el-checkbox
                >
                <el-checkbox
                  label="INVENTORY_AWEME_FEED"
                  :disabled="pageData.delivery_range == 'UNION'"
                  >抖音</el-checkbox
                >
                <el-checkbox label="INVENTORY_UNION_SLOT">穿山甲</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <ContainerTitle>Android应用下载详情页</ContainerTitle>
            <el-form-item label="下载详情页设置方式">
              <el-radio-group v-model="pageData.web_url_setting_mode">
                <el-radio-button :label="0" v-if="pageData.tfSettingType == 0"
                  >分账户设置</el-radio-button
                >
                <el-radio-button :label="1" v-if="pageData.tfSettingType == 1"
                  >分计划设置</el-radio-button
                >
              </el-radio-group>
            </el-form-item>
            <el-form-item label="应用下载详情页">
              <div v-if="pageData.web_url_setting_mode == 0">
                <div v-for="(item, index) in pageData.groupList" :key="index">
                  <div>{{ item.accountName }}</div>
                  <el-radio-group v-model="item.landPageType" style="display:block">
                    <el-radio-button :label="0">自定义</el-radio-button>
                    <el-radio-button :label="1">选择已有</el-radio-button>
                  </el-radio-group>
                  <el-input v-if="item.landPageType == 0" v-model="item.webUrl[0].web_url" class="u-w350 u-mt15" placeholder="请输入落地页链接" ></el-input>
                  <img
                    v-if="item.landPageInfo && item.landPageType == 1"
                    :src="item.landPageInfo.thumbnail"
                    class="u-mt15"
                    alt=""
                    style="width: 150px; height: 170px; display: block"
                  />
                  <el-button
                    type="primary"
                    v-if="item.landPageType == 1"
                    @click="goChooseLandingpage(item.accountId, index)"
                    class="u-mt15"
                    >选择橙子建站落地页</el-button
                  >
                </div>
              </div>
              <div v-else>
                <div
                  v-for="(item, index) in pageData.planGroupList"
                  :key="index"
                >
                  <div>{{ item.accountName }}&nbsp;{{ item.fileName }}</div>
                  <el-radio-group v-model="item.landPageType" style="display:block">
                    <el-radio-button :label="0">自定义</el-radio-button>
                    <el-radio-button :label="1">选择已有</el-radio-button>
                  </el-radio-group>
                  <el-input v-if="item.landPageType == 0" v-model="item.webUrl[0].web_url" class="u-w350 u-mt15" placeholder="请输入落地页链接" ></el-input>
                  <img
                    v-if="item.landPageInfo && item.landPageType == 1"
                    :src="item.landPageInfo.thumbnail"
                    class="u-mt15"
                    alt=""
                    style="width: 150px; height: 170px; display: block"
                  />
                  <el-button
                    v-if="item.landPageType == 1"
                    type="primary"
                    class="u-mt15"
                    @click="goChooseLandingpage(item.accountId, index)"
                    >选择橙子建站落地页</el-button
                  >
                </div>
              </div>
            </el-form-item>
            <div
              v-if="
                pageData.delivery_range == 'DEFAULT' &&
                pageData.advPosition == 0 &&
                pageData.inventory_type.includes('INVENTORY_AWEME_FEED')
              "
            >
              <ContainerTitle class="font-size-defult">卡片信息</ContainerTitle>
              <el-form-item label="卡片主图">
                <el-upload
                  class="avatar-uploader"
                  :action="`${BASE_URL}/marketing_tt/api/task_tt_general/upload_product_image`"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                >
                  <img v-if="cardImageUrl" :src="cardImageUrl" class="avatar" />
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </el-form-item>
              <el-form-item label="卡片标题" prop="cardTitle">
                <el-input
                  class="u-w350"
                  placeholder="1-7个汉字"
                  v-model="pageData.cardTitle"
                  maxlength="10"
                ></el-input>
                <div class="bg-purple-light text-info u-mt15 u-w500">
                  建议填写您推广产品的名称。如XX（您的品牌）牛奶、XX游戏；XX（抖音昵称）直播等
                </div>
              </el-form-item>
              <el-form-item label="商品卖点" prop="productSellingPoints">
                <el-input
                  type="textarea"
                  class="u-w350"
                  placeholder="长度6-9个汉字，最多可填10个卖点"
                  v-model="pageData.productSellingPoints"
                ></el-input>
                <el-button
                  type="primary"
                  style="margin-left: 10px"
                  @click="generateSellingPoints"
                  >添加卖点</el-button
                >
              </el-form-item>
              <el-form-item>
                <div
                  v-for="(points, index) in pageData.product_selling_points"
                  :key="index"
                  class="u-mt15"
                >
                  <el-input
                    class="u-w350"
                    placeholder="长度6-9个汉字，最多可填10个卖点"
                    :value="points"
                    :disabled="true"
                  ></el-input>
                  <el-button
                    style="margin-left: 10px"
                    @click="deleteSellingPoints(index)"
                    >删除</el-button
                  >
                </div>
              </el-form-item>
              <el-form-item label="行动号召按钮">
                <el-radio-group
                  v-model="pageData.enable_personal_action"
                  style="display: block"
                >
                  <el-radio-button :label="1">开启智能优选</el-radio-button>
                  <el-radio-button :label="0">关闭智能优选</el-radio-button>
                </el-radio-group>
                <div
                  class="bg-purple-light text-info u-mt15"
                  v-if="pageData.enable_personal_action == 1"
                >
                  智能优选：系统将基于字节领先的技术能力和实时的投放数据，在每次抖音广告显示时，挑选最有利于转化的文案进行显示，帮助您提升转化能力
                </div>
                <el-select
                  class="u-w350 u-mt15"
                  placeholder="立即下载【默认+单选】"
                  filterable
                  v-model="pageData.calltoAction"
                  @change="handleChangecalltoActionOptions"
                >
                  <el-option
                    v-for="item in calltoActionOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
                <div
                  class="bg-purple-light text-info u-mt15"
                  v-if="pageData.enable_personal_action == 1"
                >
                  在无法使用智能优选的流量场景下，将使用上方文案展示给用户。
                </div>
                <div class="bg-purple-light text-info u-mt15" v-else>
                  关闭智能优选后，将对所有用户展示您选择的文案。
                </div>
              </el-form-item>
              <el-form-item label="门店包">
                <el-button type="primary">不使用</el-button>
              </el-form-item>
            </div>

            <ContainerTitle class="font-size-defult"
              >其他创意信息</ContainerTitle
            >
            <el-form-item
              label="行动号召按钮"
              prop="calltoAction"
              v-if="pageData.delivery_range == 'UNION'"
            >
              <el-select
                class="u-w350"
                placeholder="立即下载【默认+单选】"
                filterable
                v-model="pageData.calltoAction"
                @change="handleChangecalltoActionOptions"
              >
                <el-option
                  v-for="item in calltoActionOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="应用名">
              <el-input
                class="u-w350"
                placeholder="1-10个汉字"
                v-model="pageData.applicationName"
                maxlength="10"
              ></el-input>
            </el-form-item>
            <el-form-item label="副标题">
              <el-input
                class="u-w350"
                placeholder="1-12个汉字"
                v-model="pageData.subTitle"
                maxlength="12"
              ></el-input>
            </el-form-item>
            <el-form-item label="广告来源">
              <el-input
                class="u-w350"
                placeholder="4-20个字符"
                v-model="pageData.source"
                maxlength="12"
              ></el-input>
            </el-form-item>
            <!-- <el-form-item label="广告评论">
              <div class="u-black">关闭</div>
            </el-form-item> -->
            <el-form-item label="自动生成视频素材">
              <el-radio-group v-model="pageData.creativeShowType">
                <el-radio-button :label="0">不启用</el-radio-button>
                <el-radio-button :label="1">启用</el-radio-button>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="最优创意衍生计划">
              <el-radio-group v-model="pageData.generate_derived_ad">
                <el-radio-button :label="0">不启用</el-radio-button>
                <el-radio-button :label="1">启用</el-radio-button>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="创意展现">
              <el-radio-group v-model="pageData.is_presented_video">
                <el-radio-button :label="0">优选模式</el-radio-button>
                <el-radio-button :label="1">轮播模式</el-radio-button>
              </el-radio-group>
              <div
                class="bg-purple-light text-info u-mt15"
                v-if="pageData.creativeShowType == 0"
              >
                选择优选模式，系统会自动对效果好的创意进行展示量倾斜，创意效果越好展示量越高
              </div>
              <div
                class="bg-purple-light text-info u-mt15"
                v-if="pageData.creativeShowType == 1"
              >
                使用创意轮播，系统将平分各创意展现机会，便于广告主比较各创意投放效果
              </div>
            </el-form-item>
            <ContainerTitle>创意分类</ContainerTitle>
            <el-form-item label="创意分类" prop="industry">
              <el-cascader
                v-model="pageData.industry"
                :props="{ value: 'code' }"
                :options="industryOptions"
                @change="handleChangeIndustry"
                class="u-w350"
              ></el-cascader>
            </el-form-item>
            <el-form-item
              size="small"
              label="创意标签"
              :rules="pageRules.creativeLabel"
            >
              <div v-for="(item, index) in pageData.creativeLabel" :key="index">
                <el-form-item
                  size="small"
                  label
                  :prop="'creativeLabel.' + index + '.label'"
                  :rules="pageRules.creativeLabel"
                >
                  <el-input
                    class="u-w350"
                    placeholder="1-20个汉字"
                    v-model="item.label"
                    :maxlength="index == 0 ? 5000 : 20"
                    :disabled="index != 0"
                  ></el-input>
                  <el-button
                    type="primary"
                    style="margin-left: 10px"
                    v-if="index == 0"
                    @click="generateCreativeLabel"
                    >生成标签</el-button
                  >
                  <el-button
                    style="margin-left: 10px"
                    v-else
                    @click="deleteCreativeLabel(index)"
                    >删除</el-button
                  >
                </el-form-item>
              </div>
            </el-form-item>
            <ContainerTitle>创意监测</ContainerTitle>
            <el-form-item label="展示监测链接">
              <el-input
                class="u-w350"
                placeholder="输入监测链接"
                v-model="pageData.showMonitoringLinks"
                maxlength="500"
                type="textarea"
              ></el-input>
            </el-form-item>
            <el-form-item label="点击监测链接">
              <el-input
                class="u-w350"
                placeholder="输入监测链接"
                v-model="pageData.clickMonitoringLinks"
                maxlength="500"
                type="textarea"
              ></el-input>
            </el-form-item>
          </div>
        </div>
      </el-form>
      <!-- <div style="height: 600px" id="div1">广告组</div>
      <div style="height: 600px" id="div2">素材</div>
      <div style="height: 600px" id="div3">投放设置</div>
      <div style="height: 600px" id="div4">定向设置</div>
      <div style="height: 600px" id="div5">创意设置</div> -->
    </Container>
    <Affix :offset-bottom="0">
      <ButtonGroup isFixed align="right">
        <el-button size="small" @click="$router.back()">返回</el-button>
        <el-button size="small" type="primary" @click="handleEnsure"
          >确定</el-button
        >
      </ButtonGroup>
    </Affix>
  </div>
</template>

<script>
import ContainerTitle from "@/components/container-title";
import Container from "@/components/container";
import Affix from "@/components/affix";
import { mapState } from "vuex";
import ButtonGroup from "@/components/button-group";
import { ADV_ADRESS, BTN_TEXT, MAEKETOPTIONS } from "@/assets/js/flow-option";
import { eventBus } from "@/assets/js/enentBus";
import putArea from "@/assets/js/city";
import DropTime from "./components/drop-time";
import DATERANGE_OPTIONS, {
  DATERANGE_DISABLED_BEFORE,
} from "@/assets/js/daterange-option";
const validateMoney = (rule, value, callback) => {
  var patrn = /^\d+(\.\d+)?$/;
  if (value == "") {
    callback(new Error("请输入出价"));
  } else if (value.indexOf(".") != -1 && value.split(".")[1].length > 2) {
    callback(new Error("最多输入两位小数点")); //小数点后两位
  } else if (!patrn.exec(value)) {
    callback(new Error("请您输入数字")); //防止输入多个小数点
  } else {
    callback();
  }
};
export default {
  name: "toutiao-currency-detail",
  components: {
    ContainerTitle,
    Container,
    Affix,
    ButtonGroup,
    DropTime,
  },
  data() {
    return {
      copyVideoInfo: "", //复制视频信息
      cardImageUrl: "", //卡片主图
      active: 1,
      scrollTop1: 0,
      scrollTop2: 0,
      scrollTop3: 0,
      scrollTop4: 0,
      scrollTop5: 0,
      DATERANGE_DISABLED_BEFORE,
      ADV_ADRESS,
      BTN_TEXT,
      MAEKETOPTIONS,
      pageAction: this.$route.query.action,
      BASE_URL: process.env.VUE_APP_BASE_URL,
      // 下拉
      downloadUrlOptions: [],
      platformOptions: [],
      customerOptions: [],
      productOptions: [],
      dialogVisibleImg: false,
      itemgroupName: [],
      account: [], //头条账户列表
      mainAccountOptions: [],
      dateValue: "",
      calltoActionOptions: [
        {
          label: "立即下载",
          value: "BUTTON_TEXT_DOWNLOAD",
        },
        {
          label: "了解详情",
          value: "",
        },
        /*  {
          label: "去看看",
          value: "BUTTON_TEXT_LOOK",
        },
        {
          label: "去逛一逛",
          value: "BUTTON_TEXT_STROLL",
        },
        {
          label: "来拼一拼",
          value: "3",
        },
        {
          label: "立即抢购",
          value: "4",
        },
        {
          label: "立即下单",
          value: "5",
        },
        {
          label: "点击抢购",
          value: "6",
        },
        {
          label: "抢抢看",
          value: "7",
        },
        {
          label: "查看惊喜",
          value: "8",
        },
        {
          label: "了解详情",
          value: "9",
        },
        {
          label: "购买同款",
          value: "10",
        },
        {
          label: "获取优惠",
          value: "11",
        },
        {
          label: "领取好",
          value: "12",
        }, */
      ],
      subAccountOptions: [],
      value: [],
      productNameOptions: [],
      moudleNameOptions: [],
      chooseAppeOptions: [],
      crowdOptions: [],
      // CrowdOutOptions:[],
      advLocalOptions: [],
      btnTextOptions: [],
      industryOptions: [], //行业
      options: [],
      selectedOptions: [],
      cityArr: [], //城市列表
      areaArr: [], //区县列表
      province: "", //省
      city: "", //市
      area: "", // 区县,
      provinceCityArea: "", //选择器选择的省市区
      pageData: {
        advPlanName: null, //统一广告计划名称
        source: null, //来源
        is_presented_video: 0, //自动生成视频素材 0否
        generate_derived_ad: 0, //是否开启衍生计划 0否
        enable_personal_action: 1, //行动号召是否智能优选 默认开启
        productSellingPoints: "", //商品卖点输入框
        product_selling_points: [], //商品卖点列表
        cardTitle: "", //卡片标题
        delivery_range: "DEFAULT", //投放范围
        union_video_type: "ORIGINAL_VIDEO", //投放形式 默认原生
        web_url_setting_mode: 0, //Android应用下载详情页设置方式
        collocationType: 0, //试玩搭配
        creativeShowType: 0, //创意展现方式
        offerType: 0, //出价方式
        tfTarget: 0, //投放目标
        tfSettingType: 0, //投放目标设置方式
        tgmd: 0, //推广目的
        inventory_type: [], //指定媒体位置
        advPosition: 1, //广告位置
        launchScenario: "",
        industry: [], //行业
        creativeType: 1, //创意类型
        flow_control_mode: "FLOW_CONTROL_MODE_FAST", //竞价策略
        yxzh: false, //优先转化
        budget_mode: "BUDGET_MODE_DAY",
        mainAccount: null,
        calltoAction: "", //行动号召选项
        applicationName: null, //应用名
        subTitle: null, //副标题
        showMonitoringLinks: null, //展示监测链接
        clickMonitoringLinks: null, //点击监测链接
        subAccount: null,
        advName: null,
        market: null,
        budget: null,
        productName: null,
        advGroupName: null,
        moudleName: null,
        link: null,
        chooseApplication: null,
        firstDown: 0,
        phoneType: [],
        clickUrl: null,
        directionalCrowd: null,
        directionalCrowdOut: null,
        moudleCont: null,
        // years:[21,40],
        minYears: 18,
        maxYears: 55,
        putDate: null,
        cycleChoice: 0, // 投放周期
        cycleDaterange: [], // 投放周期时间段
        startTime: "", // 自定义投放周期
        endTime: "", // 自定义投放周期
        startDate: this.formatDateTime(new Date(), "y-m-d h-m"),
        endDate: "2099-01-01 00:00",
        scheduleChoice: 0, // 投放时段
        scheduleWeek: "", // 投放时段自定义
        downloadUrlType: 0, //下载链接选择方式
        downloadUrl: "", //下载链接
        chooseType: 0, //广告组方式
        downloadType: 1,
        downloadUrl: "",
        isFirst: "",
        packageNameType: 0,
        packageName: "",
        budgetType: 1, //预算类型
        scene: 0, //投放场景
        age: ["AGE_BETWEEN_24_30"], //年龄
        ageOption: [
          { name: "24-30", value: "AGE_BETWEEN_24_30" },
          { name: "31-40", value: "AGE_BETWEEN_31_40" },
          { name: "41-49", value: "AGE_BETWEEN_41_49" },
          { name: "50+", value: "AGE_ABOVE_50" },
        ],
        groupList: [],
        planGroupList: [], //分计划
        playGroupList: [], //计划包含试玩素材
        hide_if_exists: 0, //过滤已安装
        budgetAmount: "", //预算金额
        launchDateType: 1, //投放时间类型
        launchPeriodType: 1, //投放时段类型
        launchPeriod: "", //投放时段
        conversionList: [
          {
            targetconversionbid: "", //目标转化出价 //出价和预算
            deepconversionbid: "", //深度转化出价
            deepconversionrate: 0, //深度转化率
            isAuto: "", //是否自动出价
            deep_bid_type: "DEEP_BID_MIN",
          },
        ],
        crowd: 2, //定量人群
        priceArr: [
          {
            price: "",
          },
        ],
        AdvProgramName: null,
        advLocal: null,
        matterType: null,
        btnText: null,
        slogan: [
          {
            slogan: "",
          },
        ],
        creativeTitleContent: "",
        creativeTitle: [],
        creativeLabel: [
          {
            label: "",
          },
        ],
        fileList: [],
        videoSrc: null,
        videoFileList: [],
      },

      pageRules: {
        productSellingPoints: {
          required: true,
          message: "请填写商品卖点",
          trigger: ["blur"],
        },
        cardTitle: {
          required: true,
          message: "请选择填写卡片标题",
          trigger: ["blur"],
        },
        inventory_type: {
          required: true,
          message: "请选择媒体指定位置",
          trigger: ["blur", "change"],
        },
        applicationName: {
          required: true,
          message: "请输入应用名",
          trigger: ["blur"],
        },
        creativeTitle: {
          min: 5,
          required: true,
          message: "请输入创意标题,最少5个字",
          trigger: ["blur"],
        },
        creativeLabel: {
          required: true,
          message: "请输入创意标签",
          trigger: ["blur"],
        },
        mainAccount: {
          required: true,
          message: "请选择头条账户",
          trigger: ["blur"],
        },
        calltoAction: {
          required: true,
          message: "请选择行动号召按钮",
          trigger: ["change", "blur"],
        },
        subAccount: {
          required: true,
          message: "请选择头条子账户",
          trigger: ["change", "blur"],
        },
        industry: {
          required: true,
          message: "请选择创意分类",
          trigger: ["change", "blur"],
        },
        advName: {
          required: true,
          message: "请输入广告计划名称",
          trigger: ["blur"],
        },
        downloadUrl: {
          required: true,
          message: "请输入广告计划名称",
          trigger: ["blur"],
        },
        productName: {
          required: true,
          message: "请选择产品名称",
          trigger: ["change", "blur"],
        },
        advGroupName: {
          required: true,
          message: "请输入广告组名称",
          trigger: ["blur"],
        },
        groupName: {
          required: true,
          message: "请选择广告组名称",
          trigger: ["blur"],
        },
        targetconversionbid: {
          required: true,
          /* message: "请输入目标转化出价", */
          trigger: ["blur"],
          validator: validateMoney,
        },
        deepconversionbid: {
          required: true,
          /*  message: "请输入深度转化出价", */
          trigger: ["blur"],
          validator: validateMoney,
        },
        budgetAmount: {
          required: true,
          message: "请输入预算",
          trigger: ["blur"],
        },
        budget: {
          required: true,
          message: "请输入预算",
          trigger: ["blur"],
        },
        moudleName: {
          required: true,
          message: "请选择定向模版文件名",
          trigger: ["change", "blur"],
        },
        price: [{ required: true, trigger: "blur", validator: validateMoney }],
        AdvProgramName: {
          required: true,
          message: "请输入广告创意名称",
          trigger: ["blur"],
        },
        advLocal: {
          required: true,
          message: "请选择广告位置",
          trigger: ["change", "blur"],
        },
        btnText: {
          required: true,
          message: "请选择行动号召按钮文案",
          trigger: ["change", "blur"],
        },
        slogan: {
          required: true,
          message: "不能为空",
          trigger: ["blur", "change"],
        },
        clickUrl: {
          required: true,
          message: "不能为空",
          trigger: ["blur"],
        },
        fileList: {
          required: true,
          message: "请上传封面图片",
          trigger: ["change", "blur"],
        },
        videoSrc: {
          required: true,
          message: "请上传视频",
          trigger: ["change", "blur"],
        },
      },

      //上传图片
      importUrl: "",
      dialogImageUrl: "",
      dialogVisible: false,
      importLoading: false,
      userCheck: false,
      imgList: [],
      arrImgList: [],
      // 上传视频
      videoFlag: false,
      videoUploadPercent: 0,
    };
  },
  computed: {
    pageTitle() {
      return {
        create: "新增",
        edit: "编辑",
        detail: "查看",
      }[this.pageAction];
    },
    ...mapState(["KEEP_ALIVE_ROUTER"]),
  },
  methods: {
    getDownloadUrlList(agent, accountId) {
      this.$http({
        method: "get",
        url: "/marketing_tt/api/task_tt_general/get_downloadUrl_list",
        params: {
          agent: agent,
          accountId: accountId,
        },
      }).then((res) => {
        this.downloadUrlOptions = res.data.data;
        this.$forceUpdate();
      });
    },
    selectDownloadUrl(item, download_url) {
      this.downloadUrlOptions.forEach((items) => {
        if (download_url == items.id) {
          item.targetSetting[0].packages = items.package;
        }
      });
    },
    getDownloadUrlList(agent, accountId) {
      this.$http({
        method: "get",
        url: "/marketing_tt/api/task_tt_general/get_downloadUrl_list",
        params: {
          agent: agent,
          accountId: accountId,
        },
      }).then((res) => {
        this.downloadUrlOptions = res.data.data;
        this.$forceUpdate();
      });
    },
    generateAdvPlanName() {
      this.pageData.planGroupList.forEach((item) => {
        item.name = this.pageData.advPlanName;
      });
      this.$forceUpdate();
    },
    changeAdvItemName() {
      this.$forceUpdate();
    },
    changeDeliveryRange() {
      if (this.pageData.delivery_range == "UNION") {
        this.pageData.advPosition = 0;
        this.pageData.inventory_type = ["INVENTORY_UNION_SLOT"];
      }
      this.pageData.groupList.forEach((item) => {
        this.$http({
          method: "get",
          url: "/marketing_tt/api/task_tt_general/get_audience_package",
          params: {
            accountId: item.accountId,
            delivery_range: this.pageData.delivery_range,
          },
        }).then((res) => {
          if (res.data.code === 1) {
            this.$set(
              item,
              "deliveryRangeOptionList",
              res.data.data.data.audience_packages
            );
            /* this.account.forEach((account)=>{
                  if(account.accountId == item.id){
                    account.deliveryRangeOptionList = res.data.data.data.audience_packages
                  }
                }) */
          }
        });
      });
    },
    sureParams() {
      // advertment:this.pageData.,
      let cover = [],
        video = [],
        creativeLabel = [],
        launchPeriodAry = [],
        flow_control_mode = "",
        account = [],
        plan = {};
      creativeLabel = this.pageData.creativeLabel.filter(
        (item, index) => index > 0
      );
      let group = [],
        adjust_deep_cpa = [],
        adjustcpa = [];
      if (this.pageData.scene == 1) {
        if (this.pageData.yxzh == true) {
          flow_control_mode = "FLOW_CONTROL_MODE_BALANCE";
        } else {
          flow_control_mode = "FLOW_CONTROL_MODE_FAST";
        }
        this.pageData.conversionList.forEach((item) => {
          if (item.isAuto == false) {
            adjustcpa.push(0);
          } else {
            adjustcpa.push(1);
          }
        });
        this.pageData.conversionList.forEach((item) => {
          if (item.adjust_deep_cpa == false) {
            adjust_deep_cpa.push(0);
          } else {
            adjust_deep_cpa.push(1);
          }
        });
      } else {
        flow_control_mode = this.pageData.flow_control_mode;
      }
      if (this.pageData.chooseType == 0) {
        group = [
          {
            //广告组
            budget_mode: "BUDGET_MODE_INFINITE", //预算类型
            campaign_name: this.pageData.advGroupName, //广告组名称
            landing_type: this.pageData.tgmd == 0 ? "APP" : "LINK", //推广目的
          },
        ];
        if (this.pageData.advGroupName == null) {
          this.$message.error("请填写广告组名称");
          return;
        }
      } else {
        this.pageData.groupList.forEach((item) => {
          let obj = {
            account_id: item.accountId,
            campaign_id: item.groupName,
            budget: 1000,
            budget_mode: "BUDGET_MODE_INFINITE",
            landing_type: "APP",
          };
          group.push(obj);
        });
      }
      if (creativeLabel.length == 0) {
        this.$message.error("请生成创意标签");
        return;
      }
      if (this.pageData.age.length == 0) {
        this.$message.error("请选择年龄");
        return;
      }
      this.pageData.videoFileList.forEach((item) => {
        let covers = [];
        item.covers.forEach((items) => {
          let obj = { material_toutiao_id: items.coverToutiaoId };
          if (items.coverToutiaoId != null) {
            covers.push(obj);
          }
        });
        video.push({
          material_toutiao_id: item.material_toutiao_id,
          covers: covers,
          video_id: item.videoId,
        });
      });
      let retargeting_tags_exclude, retargeting_tags_include;
      if (this.pageData.downloadType == 1) {
        retargeting_tags_include = [307608982];
        retargeting_tags_exclude = [311092739];
      } else if (this.pageData.downloadType == 2) {
        retargeting_tags_include = [307608982];
        retargeting_tags_exclude = [308132361];
      }
      /* console.log(this.pageData.planGroupList); */
      let name = []; //计划名称
      this.pageData.planGroupList.forEach((pitem) => {
        name.push({ binding: pitem.binding, name: pitem.name });
        console.log(pitem.budgetBid[0]);
      });
      //分账户设置
      plan = {
        enablePlayable: this.pageData.collocationType,
        delivery_range: this.pageData.delivery_range,
        union_video_type:
          this.pageData.delivery_range == "UNION"
            ? this.pageData.union_video_type
            : null,
        downloadType:
          this.pageData.downloadType == 3 ? "EXTERNAL_URL" : "DOWNLOAD_URL",
        name: name,
      };
      if (this.pageData.tfSettingType == 0) {
      }
      let planTargetSetting = [],
        planBudgetBid = [],
        planWebUrl = [];
      this.pageData.planGroupList.forEach((item) => {
        let targetSetting = [],
          budgetBid = [],
          webUrl = [],
          bid = [],
          deep_cpabid = [];
        let budgetBidObj = JSON.parse(JSON.stringify(item.budgetBid[0]));
        let webUrlObj = JSON.parse(JSON.stringify(item.webUrl[0]));
        let targetSettingObj = JSON.parse(
          JSON.stringify(item.targetSetting[0])
        );
        if (budgetBidObj.smart_bid_type == "SMART_BID_CONSERVATIVE") {
          budgetBidObj.deep_bid_type = "SMARTBID";
        } else {
          budgetBidObj.deep_bid_type = "DEEP_BID_MIN";
        }
        if (item.yxzh == true) {
          budgetBidObj.flow_control_mode = "FLOW_CONTROL_MODE_BALANCE";
        } else {
          budgetBidObj.flow_control_mode = "FLOW_CONTROL_MODE_FAST";
        }
        budgetBidObj.binding = item.binding;
        targetSettingObj.binding = item.binding;
        webUrlObj.binding = item.binding;
        if (item.landPageInfo && item.landPageType == 1) {
          webUrlObj.web_url =
            "https://www.chengzijianzhan.com/tetris/page/" +
            item.landPageInfo.siteId;
        }
        if(item.landPageType == 0){
           webUrlObj.web_url = item.webUrl[0].web_url
        }
        if (item.isFirst == false) {
          targetSettingObj.download_mode = "DEFAULT";
        } else {
          targetSettingObj.download_mode = "APP_STORE_DELIVERY";
        }
        if (item.conversionList[0].isAuto == false) {
          item.budgetBid.adjust_cpa = 0;
        } else {
          item.budgetBid.adjust_cpa = 1;
        }
        if (this.pageData.downloadType == 1) {
          targetSettingObj.app_type = "APP_ANDROID";
        } else if (this.pageData.downloadType == 2) {
          targetSettingObj.app_type = "APP_IOS";
        } else {
          targetSettingObj.app_type = "";
        }
        if (this.pageData.offerType == 0) {
          //预算出价统一设置
          budgetBidObj.bids[0].bid = parseFloat(
            this.pageData.conversionList[0].targetconversionbid
          );
          budgetBidObj.bids[0].deep_cpabid = parseFloat(
            this.pageData.conversionList[0].deepconversionbid
          );
          budgetBidObj.bids[0].deep_bid_type = budgetBidObj.deep_bid_type;
          if (this.pageData.yxzh == true) {
            budgetBidObj.flow_control_mode = "FLOW_CONTROL_MODE_BALANCE";
          } else {
            budgetBidObj.flow_control_mode = "FLOW_CONTROL_MODE_FAST";
          }
        } else {
          budgetBidObj.bids[0].bid = parseFloat(
            item.conversionList[0].targetconversionbid
          );
          budgetBidObj.bids[0].deep_cpabid = parseFloat(
            item.conversionList[0].deepconversionbid
          );
          budgetBidObj.bids[0].deep_bid_type = budgetBidObj.deep_bid_type;
        }
        budgetBidObj.budget = parseFloat(budgetBidObj.budget);
        bid.push(item.conversionList[0].targetconversionbid);
        deep_cpabid.push(item.conversionList[0].deepconversionbid);
        //分计划设置
        if (this.pageData.offerType == 2) {
          planBudgetBid.push(budgetBidObj);
          this.$set(plan, "budgetBid", planBudgetBid);
        }
        if (this.pageData.tfSettingType == 1) {
          //投放设置
          planTargetSetting.push(targetSettingObj);
          this.$set(plan, "targetSetting", planTargetSetting);
        }
        if (this.pageData.web_url_setting_mode == 1) {
          planWebUrl.push(webUrlObj);
          this.$set(plan, "webUrl", planWebUrl);
        }
        this.$set(item, "audience_package_id", [
          {
            accountId: item.accountId,
            audience_package_id: item.audience_package,
          },
        ]);
        this.$set(item, "playableList", []);
      });
      this.pageData.groupList.forEach((item) => {
        let targetSetting = [],
          budgetBid = [],
          webUrl = [],
          bid = [],
          deep_cpabid = [];
        if (item.isFirst == false) {
          item.targetSetting[0].download_mode = "DEFAULT";
        } else {
          item.targetSetting[0].download_mode = "APP_STORE_DELIVERY";
        }
        if (item.conversionList[0].isAuto == false) {
          item.budgetBid.adjust_cpa = 0;
        } else {
          item.budgetBid.adjust_cpa = 1;
        }
        this.$set(item, "audience_package_id", [
          {
            account_id: item.accountId,
            audience_package_id: item.audience_package,
          },
        ]);

        this.$set(item, "playableList", []);
        if (this.pageData.collocationType == 1) {
          //搭配试玩
          /*  if (!item.playableInfo) {
            this.$message.error("请选择试玩素材");
            return;
          } */
          item.playableInfo.forEach((items) => {
            item.playableList.push({
              playable_id: items.playable_id,
              url: items.playable_url,
            });
            this.pageData.videoFileList.forEach((vitems) => {
              let budgetBidObj = JSON.parse(JSON.stringify(item.budgetBid[0]));
              let webUrlObj = JSON.parse(JSON.stringify(item.webUrl[0]));
              let targetSettingObj = JSON.parse(
                JSON.stringify(item.targetSetting[0])
              );
              if (this.pageData.downloadType == 1) {
                targetSettingObj.app_type = "APP_ANDROID";
              } else if (this.pageData.downloadType == 2) {
                targetSettingObj.app_type = "APP_IOS";
              } else {
                targetSettingObj.app_type = "";
              }
              if (item.yxzh == true) {
                budgetBidObj.flow_control_mode = "FLOW_CONTROL_MODE_BALANCE";
              } else {
                budgetBidObj.flow_control_mode = "FLOW_CONTROL_MODE_FAST";
              }
              targetSettingObj.binding.account_id = item.accountId;
              targetSettingObj.binding.playable_id = items.playable_id;
              targetSettingObj.binding.video_id = vitems.videoId;
              budgetBidObj.binding.account_id = item.accountId;
              budgetBidObj.binding.playable_id = items.playable_id;
              budgetBidObj.binding.video_id = vitems.videoId;
              if (budgetBidObj.smart_bid_type == "SMART_BID_CONSERVATIVE") {
                budgetBidObj.deep_bid_type = "SMARTBID";
              } else {
                budgetBidObj.deep_bid_type = "DEEP_BID_MIN";
              }
              budgetBidObj.bids[0].bid = parseFloat(
                item.conversionList[0].targetconversionbid
              );
              budgetBidObj.bids[0].deep_cpabid = parseFloat(
                item.conversionList[0].deepconversionbid
              );
              budgetBidObj.budget = parseFloat(budgetBidObj.budget);
              if (this.pageData.offerType == 0) {
                //统一设置
                let adjust_cpa = 0;
                if (this.pageData.conversionList[0].isAuto) {
                  adjust_cpa = 1;
                }
                budgetBidObj.bids[0].bid = parseFloat(
                  this.pageData.conversionList[0].targetconversionbid
                );
                budgetBidObj.bids[0].deep_cpabid = parseFloat(
                  this.pageData.conversionList[0].deepconversionbid
                );
                budgetBidObj.adjust_cpa = adjust_cpa;
                console.log(this.pageData.budgetAmount);
                budgetBidObj.budget = parseFloat(this.pageData.budgetAmount);
                budgetBidObj.budget_mode = this.pageData.budget_mode;
                if (this.pageData.scene == 1) {
                  //放量投放
                  this.pageData.conversionList[0].deep_bid_type = "SMARTBID";
                }
                budgetBidObj.deep_bid_type = this.pageData.conversionList[0].deep_bid_type;
                budgetBidObj.end_time = this.pageData.endDate;
                budgetBidObj.flow_control_mode = flow_control_mode;
                budgetBidObj.schedule_time = this.pageData.launchPeriod;
                budgetBidObj.smart_bid_type =
                  this.pageData.scene == 0
                    ? "SMART_BID_CUSTOM"
                    : "SMART_BID_CONSERVATIVE";
                budgetBidObj.start_time = this.pageData.startDate;
              }
              budgetBidObj.bids[0].deep_bid_type = budgetBidObj.deep_bid_type;
              webUrlObj.binding.account_id = item.accountId;
              if (item.landPageInfo && item.landPageType == 1) {
                webUrlObj.web_url =
                  "https://www.chengzijianzhan.com/tetris/page/" +
                  item.landPageInfo.siteId;
              }
              webUrlObj.binding.playable_id = items.playable_id;
              webUrlObj.binding.video_id = vitems.videoId;
              let schedule_time = [];
              if (this.pageData.launchPeriodType == 1) {
                for (let i = 0; i < 7 * 24; i++) {
                  schedule_time.push(0);
                }
              }
              budgetBidObj.schedule_time =
                item.budgetBid[0].launchPeriodType == 1
                  ? schedule_time.join()
                  : item.budgetBid[0].schedule_time;
              budgetBid.push(budgetBidObj);
              targetSetting.push(targetSettingObj);
              webUrl.push(webUrlObj);
              item.budgetBid = budgetBid;
              item.webUrl = webUrl;
              item.targetSetting = targetSetting;
              planBudgetBid.push(budgetBidObj);
              this.$set(plan, "budgetBid", planBudgetBid);
            });
            let content = {
              accountId: item.accountId,
              accountName: item.accountName,
              agent: item.agent,
              audience_package_id: item.audience_package_id,
              playableList: item.playableList,
            };
            if (this.pageData.tfSettingType == 0) {
              //投放目标按账户
              this.$set(content, "targetSetting", item.targetSetting);
            }
            if (this.pageData.offerType == 1) {
              //预算与出价分账户
              this.$set(content, "budgetBid", item.budgetBid);
            }
            if (this.pageData.web_url_setting_mode == 0) {
              //预算与出价分账户
              this.$set(content, "webUrl", item.webUrl);
            }
            account.push(content);
          });
        } else {
          //不搭配试玩
          this.pageData.videoFileList.forEach((vitems) => {
            let budgetBidObj = JSON.parse(JSON.stringify(item.budgetBid[0]));
            let webUrlObj = JSON.parse(JSON.stringify(item.webUrl[0]));
            let targetSettingObj = JSON.parse(
              JSON.stringify(item.targetSetting[0])
            );
            if (this.pageData.downloadType == 1) {
              targetSettingObj.app_type = "APP_ANDROID";
            } else if (this.pageData.downloadType == 2) {
              targetSettingObj.app_type = "APP_IOS";
            } else {
              targetSettingObj.app_type = "";
            }
            budgetBidObj.binding.account_id = item.accountId;
            budgetBidObj.binding.playable_id = " ";
            budgetBidObj.binding.video_id = vitems.videoId;
            if (budgetBidObj.smart_bid_type == "SMART_BID_CONSERVATIVE") {
              budgetBidObj.deep_bid_type = "SMARTBID";
            } else {
              budgetBidObj.deep_bid_type = "DEEP_BID_MIN";
            }
            if (item.yxzh == true) {
              budgetBidObj.flow_control_mode = "FLOW_CONTROL_MODE_BALANCE";
            } else {
              budgetBidObj.flow_control_mode = "FLOW_CONTROL_MODE_FAST";
            }
            budgetBidObj.bids[0].bid = parseFloat(
              item.conversionList[0].targetconversionbid
            );
            budgetBidObj.bids[0].deep_bid_type = budgetBidObj.deep_bid_type;
            budgetBidObj.bids[0].deep_cpabid = parseFloat(
              item.conversionList[0].deepconversionbid
            );
            budgetBidObj.budget = parseFloat(budgetBidObj.budget);
            webUrlObj.binding.account_id = item.accountId;
            if (this.pageData.web_url_setting_mode == 0) {
              //Android应用下载详情页分账户设置
              if (item.landPageInfo && item.landPageType == 1) {
                webUrlObj.web_url =
                  "https://www.chengzijianzhan.com/tetris/page/" +
                  item.landPageInfo.siteId;
              }
            }
            webUrlObj.binding.playable_id = "";
            webUrlObj.binding.video_id = vitems.videoId;
            targetSettingObj.binding.account_id = item.accountId;
            targetSettingObj.binding.playable_id = "";
            targetSettingObj.binding.video_id = vitems.videoId;
            let schedule_time = [];
            if (this.pageData.launchPeriodType == 1) {
              for (let i = 0; i < 7 * 24; i++) {
                schedule_time.push(0);
              }
            }
            budgetBidObj.schedule_time =
              item.budgetBid[0].launchPeriodType == 1
                ? schedule_time.join()
                : item.budgetBid[0].schedule_time;
            if (this.pageData.offerType == 0) {
              //统一设置
              let adjust_cpa = 0;
              if (this.pageData.scene == 1) {
                //放量投放
                this.pageData.conversionList[0].deep_bid_type = "SMARTBID";
              }
              if (this.pageData.conversionList[0].isAuto) {
                adjust_cpa = 1;
              }
              budgetBidObj.bids[0].deep_cpabid = parseFloat(
                this.pageData.conversionList[0].deepconversionbid
              );
              budgetBidObj.adjust_cpa = adjust_cpa;
              budgetBidObj.budget = parseFloat(this.pageData.budgetAmount);
              budgetBidObj.budget_mode = this.pageData.budget_mode;
              budgetBidObj.bids[0].bid = parseFloat(
                this.pageData.conversionList[0].targetconversionbid
              );
              budgetBidObj.deep_bid_type = this.pageData.conversionList[0].deep_bid_type;
              budgetBidObj.bids[0].deep_bid_type = budgetBidObj.deep_bid_type;
              budgetBidObj.end_time = this.pageData.endDate;
              budgetBidObj.flow_control_mode = flow_control_mode;
              budgetBidObj.schedule_time =
                this.pageData.launchPeriodType == 1
                  ? schedule_time.join()
                  : this.pageData.launchPeriod;
              budgetBidObj.smart_bid_type =
                this.pageData.scene == 0
                  ? "SMART_BID_CUSTOM"
                  : "SMART_BID_CONSERVATIVE";
              budgetBidObj.start_time = this.pageData.startDate;
            }
            budgetBid.push(budgetBidObj);
            console.log(budgetBid);
            targetSetting.push(targetSettingObj);
            webUrl.push(webUrlObj);
            item.budgetBid = budgetBid;
            item.webUrl = webUrl;
            item.targetSetting = targetSetting;
            if (this.pageData.offerType == 0) {
              planBudgetBid.push(budgetBidObj);
              this.$set(plan, "budgetBid", planBudgetBid);
            }
          });
          let content = {
            accountId: item.accountId,
            accountName: item.accountName,
            agent: item.agent,
            audience_package_id: item.audience_package_id,
            playableList: item.playableList,
          };
          if (this.pageData.tfSettingType == 0) {
            //投放目标按账户
            this.$set(content, "targetSetting", targetSetting);
          }
          if (this.pageData.offerType == 1) {
            //预算与出价分账户
            this.$set(content, "budgetBid", budgetBid);
          }
          if (this.pageData.web_url_setting_mode == 0) {
            //预算与出价分账户
            this.$set(content, "webUrl", webUrl);
          }
          account.push(content);
        }
      });
      console.log(account);
      //分计划设置
      console.log(this.pageData.planGroupList);
      return {
        account: account,
        budget_bid_setting_mode: this.pageData.offerType, //预算与出价设置方式
        creative: {
          //创建广告创意
          source: this.pageData.source, //来源
          app_name: this.pageData.applicationName,
          smart_inventory: this.pageData.advPosition,
          creative_material_mode:
            this.pageData.creativeType == 1 ? "" : "STATIC_ASSEMBLE",
          action_track_url: this.pageData.clickMonitoringLinks, //点击监测链接
          ad_keywords: creativeLabel.map((item) => item.label), //创意标签
          creative_display_mode: "CREATIVE_DISPLAY_MODE_CTR", //创意展现方式
          inventory_type: this.pageData.inventory_type, //创意投放位置
          smart_inventory: 0, //是否使用优选广告位
          third_industry_id: this.pageData.industry[2], //创意分类
          title: this.pageData.creativeTitle, //创意标题
          track_url: this.pageData.showMonitoringLinks, //展示监测链接
          button_text: this.pageData.calltoAction, //行动号召
          advanced_creative_title: this.pageData.subTitle, //副标题
          enable_personal_action:
            this.pageData.enable_personal_action == 0 ? false : true, //是否使用智能优选
          enable_store_pack: false, //是否使用门店包
          generate_derived_ad: this.pageData.generate_derived_ad, //是否开启衍生计划
          is_presented_video: this.pageData.is_presented_video, //自动生成视频素材
          product_description: this.pageData.cardTitle, //卡牌标题
          product_image_url: this.cardImageUrl, //卡片图片url
          product_selling_points: this.pageData.product_selling_points, //商品卖点
        },
        choose_already: this.pageData.chooseType,
        target_setting_mode: this.pageData.tfSettingType == 0 ? 1 : 2, //投放目标设置方式
        web_url_setting_mode: this.pageData.web_url_setting_mode == 0 ? 1 : 2, //Android应用下载详情页设置方式
        group: group,
        plan: plan,
        video: video,
      };
    },
    //删除视频
    deleteVideoList(index) {
      this.pageData.videoFileList.splice(index, 1);
      this.formatPlanData();
    },
    //解析视频
    analysisVideo(data) {
      let copyVideoInfo = JSON.parse(data);
      console.log(copyVideoInfo);
      copyVideoInfo.forEach((item) => {
        let obj = {
          coverUrl: item.covers,
          videoUrl: item.materialUrl,
          fileName: item.materialName,
          videoId: item.materialToutiaoId,
          material_toutiao_id: item.materialToutiaoId,
          covers: item.covers,
        };
        this.pageData.videoFileList.push(obj);
      });
      this.formatPlanData();
      console.log(this.pageData.videoFileList);
    },
    selectTgmd() {
      if (this.pageData.tgmd == 1) {
        this.pageData.downloadType = 3;
      }
    },
    handleAvatarSuccess(res, file) {
      this.cardImageUrl = res.data.url;
    },
    formatPlanData() {
      if (this.pageData.collocationType == 0) {
        //没有搭配试玩
        this.pageData.planGroupList = [];
        let that = this;
        this.pageData.groupList.forEach((item) => {
          this.pageData.videoFileList.forEach((items) => {
            let obj = JSON.parse(JSON.stringify(item)); //克隆一份对象
            this.$set(obj, "coverUrl", items.coverUrl);
            this.$set(obj, "videoUrl", items.videoUrl);
            this.$set(obj, "fileName", items.fileName);
            this.$set(obj, "binding", {
              account_id: item.accountId,
              video_id: items.videoId,
            });
            this.$set(obj, "videoId", items.videoId);
            console.log(item);
            this.pageData.planGroupList.push(obj);
          });
        });
        /* this.formatPlanData(); */
      } else {
        //搭配试玩
        this.pageData.planGroupList = [];
        let that = this;
        this.pageData.groupList.forEach((item) => {
          this.pageData.videoFileList.forEach((items) => {
            if (item.playableInfo) {
              item.playableInfo.forEach((pitem) => {
                let obj = JSON.parse(JSON.stringify(item)); //克隆一份对象
                this.$set(obj, "coverUrl", items.coverUrl);
                this.$set(obj, "videoUrl", items.videoUrl);
                this.$set(obj, "fileName", items.fileName);
                this.$set(obj, "videoId", items.videoId);
                this.$set(obj, "playable_name", pitem.playable_name);
                this.$set(obj, "playable_name", pitem.playable_name);
                this.$set(obj, "binding", {
                  account_id: item.accountId,
                  video_id: items.videoId,
                  playable_id: pitem.playable_id,
                });
                this.pageData.planGroupList.push(obj);
              });
            }
          });
        });
      }
      console.log(this.pageData.planGroupList);
    },
    getConvertId(id) {
      let content = "DOWNLOAD_URL";
      if (!id) {
        this.$message.error("请选择头条账户");
        return;
      }
      if (pageData.downloadType == 3) {
        content = "EXTERNAL_URL";
      }
      this.$http({
        method: "post",
        url: "/marketing_tt/api/task_tt_general/get_convert_id",
        params: {
          advertiser_id: id,
          landing_type: "APP",
          promotion_content: content,
        },
      }).then((res) => {});
    },
    toSelectFirst(item, index) {
      if (item.isFirst == true) {
        item.targetSetting[0].download_mode = "APP_STORE_DELIVERY";
      } else {
        item.targetSetting[0].download_mode = "DEFAULT";
      }
      console.log(this.pageData.groupList);
    },
    toSetTfType() {
      if (this.pageData.tfSettingType == 0) {
        this.pageData.web_url_setting_mode = 0;
      } else {
        this.pageData.web_url_setting_mode = 1;
      }
      this.formatPlanData();
    },
    goChooseLandingpage(accountId, index) {
      this.$router.push({
        name: "choose-landingpage",
        query: {
          accountId: accountId,
          index: index,
        },
      });
    },
    goChooseMaterial(accountId, playableInfo) {
      console.log(accountId);
      this.$router.push({
        name: "choose-material",
        query: {
          accountId: accountId,
          playableInfo: playableInfo,
        },
      });
    },
    changeAdvPosition() {
      if (this.pageData.advPosition == 1) {
        this.pageData.inventory_type = [];
      }
    },
    changeinventoryType() {},
    handleChangeIndustry(value) {},
    selectConversion() {},
    // 递归判断列表，把最后的children设为undefined
    getTreeData(data) {
      for (var i = 0; i < data.length; i++) {
        if (data[i].children.length == 0) {
          // children若为空数组，则将children设为undefined
          data[i].children = undefined;
        } else {
          // children若不为空数组，则继续 递归调用 本方法
          this.getTreeData(data[i].children);
        }
      }
      return data;
    },
    getIndustry() {
      this.$http({
        method: "get",
        url: "/marketing_tt/api/task_tt_general/get_industry",
      }).then((res) => {
        let data = res.data.data.list;
        this.industryOptions = this.getTreeData(data);
      });
    },
    chageScene() {
      if (this.pageData.scene == 1) {
        this.pageData.budget_mode = "BUDGET_MODE_DAY";
      }
    },
    removeTag(val) {},
    selectGroupName() {
      /* this.pageData.groupList.forEach((item.index)=>{
        if()
      }) */
    },
    changeAge() {
      /*       this.pageData.age.forEach(item=>{
        if(item == "1"){
          if(this.pageData.age.length > 1 ){
            this.pageData.age.splice(this.pageData.age.indexOf("1"),1)
          }else{
            thia.pageData.age = ["1"]
          }
        }
      }) */
    },
    changeDateType() {
      if (this.pageData.launchDateType == 1) {
        this.pageData.startDate = this.formatDateTime(new Date(), "y-m-d h-m");
        this.pageData.endDate = "2099-01-01 00:00";
      } else {
        this.pageData.startDate = "";
        this.pageData.endDate = "";
      }
    },
    get_account_list() {
      this.$http({
        method: "get",
        url: "/marketing_tt/api/task_tt_general/get_account_list",
      }).then((res) => {
        this.mainAccountOptions = res.data.data;
      });
    },
    dateChange(value, index, type) {
      /*  this.pageData.startDate = this.formatDateTime(
        this.dateValue[0],
        "y-m-d h-m"
      );
      this.pageData.endDate = this.formatDateTime(
        this.dateValue[1],
        "y-m-d h-m"
      ); */
      if (type == 1) {
        //分账户设置
        console.log(this.pageData.groupList[index]);
        this.pageData.groupList[
          index
        ].budgetBid[0].start_time = this.formatDateTime(value[0], "y-m-d h-m");
        this.pageData.groupList[
          index
        ].budgetBid[0].end_time = this.formatDateTime(value[1], "y-m-d h-m");
      } else if (type == 2) {
        //分计划设置
        this.pageData.planGroupList[
          index
        ].budgetBid.start_time = this.formatDateTime(value[0], "y-m-d h-m");
        this.pageData.planGroupList[
          index
        ].budgetBid.end_time = this.formatDateTime(value[1], "y-m-d h-m");
      } else {
        this.pageData.startDate = this.formatDateTime(
          this.dateValue[0],
          "y-m-d h-m"
        );
        this.pageData.endDate = this.formatDateTime(
          this.dateValue[1],
          "y-m-d h-m"
        );
      }
    },
    initDistPicker() {
      let distData = putArea[0];
      let options = [];
      // 省
      for (var provinceKy in distData["100000"]) {
        let optProvinceItem = {
          value: provinceKy,
          label: distData["100000"][provinceKy],
        };
        if (distData[provinceKy]) {
          // 市
          for (var cityKy in distData[provinceKy]) {
            optProvinceItem.children = optProvinceItem.children
              ? optProvinceItem.children
              : [];
            let optCityItem = {
              value: cityKy,
              label: distData[provinceKy][cityKy],
            };
            if (distData[cityKy]) {
              // 区
              for (var areaKy in distData[cityKy]) {
                optCityItem.children = optCityItem.children
                  ? optCityItem.children
                  : [];
                let optAreaItem = {
                  value: areaKy,
                  label: distData[cityKy][areaKy],
                };
                optCityItem.children.push(optAreaItem);
              }
            }
            optProvinceItem.children.push(optCityItem);
          }
        }
        options.push(optProvinceItem);
      }
      self.distData = distData;
      self.options = options;
    },
    handleChange(value) {
      let self = this;
      //获取省名
      self.options.map((item, index) => {
        if (item.value == value[0]) {
          self.cityArr = item.children; //存储城市列表
          self.province = item.label;
        }
      });
      //获取市名
      self.cityArr.map((item, index) => {
        if (item.value == value[1]) {
          self.areaArr = item.children; //存储区县列表
          self.city = item.label;
        }
      });
      //获取区县名
      self.areaArr.map((item, index) => {
        if (item.value == value[2]) {
          self.area = item.label;
        }
      });
      self.provinceCityArea = self.province + self.city + self.area;
    },
    addConversionb(index, indexs) {
      /*  this.pageData.conversionList.push({
        targetconversionbid: "", //目标转化出价 //出价和预算
        deepconversionbid: "", //深度转化出价
        deepconversionrate: 0, //深度转化率
        isAuto: "", //自动出价
      }); */
    },
    deleteConversionb(index) {
      this.pageData.conversionList.splice(index, 1);
    },
    addCreativeTitle() {
      if (this.pageData.creativeTitle.length >= 20) {
        return;
      }
      this.pageData.creativeTitle.push({
        title: "",
      });
    },
    deleteCreativeTitle(index) {
      this.pageData.creativeTitle.splice(index, 1);
    },
    generateCreativeTitle() {
      let ary = this.pageData.creativeTitleContent.split(/[(\r\n)\r\n]+/);
      let err = 0;
      ary.forEach((item) => {
        if (item.length > 30) {
          this.$message.error("每个创意标题最多9个字");
          err = 1;
        }
      });
      if (err == 1) {
        return;
      }
      this.pageData.creativeTitle = ary;
    },
    addCreativeLabel() {
      if (this.pageData.creativeLabel.length >= 20) {
        return;
      }
      this.pageData.creativeLabel.push({
        label: "",
      });
    },
    generateCreativeLabel() {
      let sliceArr = this.pageData.creativeLabel.slice(0, 1);
      this.pageData.creativeLabel = sliceArr;
      let arr = this.pageData.creativeLabel[0].label.split(" ");
      if (arr.length > 20) {
        this.$message.error("最多生成20个创意标签");
        return;
      }
      arr.forEach((item) => {
        if (item.length > 10) {
          this.$message.error("每个创意标签最多10个字");
        } else {
          this.pageData.creativeLabel.push({ label: item });
        }
      });
    },
    generateSellingPoints() {
      let ary = this.pageData.productSellingPoints.split(/[(\r\n)\r\n]+/);
      let err = 0;
      if (ary.length > 10) {
        this.$message.error("最多生成10个卖点");
        return;
      }
      ary.forEach((item) => {
        if (item.length > 9) {
          this.$message.error("每个卖点最多9个字");
          err = 1;
        }
        if (item.length < 6) {
          this.$message.error("每个卖点最少6个汉字");
          err = 1;
        }
      });
      if (err == 1) {
        return;
      }
      this.pageData.product_selling_points = this.pageData.product_selling_points.concat(
        ary
      );
      console.log(this.pageData.product_selling_points);
    },
    deleteSellingPoints(index) {
      this.pageData.product_selling_points.splice(index, 1);
    },
    deleteCreativeLabel(index) {
      this.pageData.creativeLabel.splice(index, 1);
    },
    calculationRate(index) {
      if (
        this.pageData.conversionList[index].targetconversionbid == "" ||
        this.pageData.conversionList[index].deepconversionbid == ""
      ) {
        return false;
      } else {
        let deepconversionrate =
          parseFloat(
            this.pageData.conversionList[index].targetconversionbid /
              this.pageData.conversionList[index].deepconversionbid
          ) * 100;
        this.pageData.conversionList[
          index
        ].deepconversionrate = deepconversionrate.toFixed(2);
      }
    },
    groupCalculationRate(item, index) {
      if (item.targetconversionbid == "" || item.deepconversionbid == "") {
        return false;
      } else {
        let deepconversionrate =
          parseFloat(item.targetconversionbid / item.deepconversionbid) * 100;
        item.deepconversionrate = deepconversionrate.toFixed(2);
      }
    },
    changeDownloadUrl() {},
    mapAccountName() {
      let value = this.subAccountOptions.find(
        (item) => item.accountId == this.pageData.subAccount
      );
      if (value) {
        return value.accountName;
      }
      return null;
    },
    mapMainAccountName() {
      let value = this.mainAccountOptions.find(
        (item) => item.accountId == this.pageData.mainAccount
      );
      if (value) {
        return value.accountName;
      }
      return null;
    },
    // 投放时段变更
    scheduleWeekChange() {
      /* this.$refs.pageForm.validateField("scheduleWeek"); */
    },
    videoBeforeUpload(file) {
      const isLt30MB = file.size / 1024 / 1024 < 100;
      const isSize = new Promise(function (resolve, reject) {
        let _URL = window.URL || window.webkitURL;
        let videoElement = document.createElement("video");
        // 当指定的音频/视频的元数据已加载时，会发生 loadedmetadata 事件。 元数据包括：时长、尺寸（仅视频）以及文本轨道。
        videoElement.addEventListener("loadedmetadata", function () {
          let width = videoElement.videoWidth;
          let height = videoElement.videoHeight;
          let duration = videoElement.duration; // 视频时长
          if (!isLt30MB)
            return this.$message.error("上传视频大小不能超过100MB！");
          if (Math.floor(duration) <= 4)
            return this.$message.error("上传视频时长不能小于4S！");
          resolve();
          /* let valid = `${width}*${height}` === "720*1280";
          valid ? resolve() : reject(); */
        });
        videoElement.src = _URL.createObjectURL(file);
      }).then(
        () => {
          return file;
        },
        () => {
          this.$message.error("上传视频尺寸为 720*1280！");
          return Promise.reject();
        }
      );
      return isSize;
    },
    uploadVideoProcess(event, file) {
      this.videoFlag = true;
      this.videoUploadPercent = file.percentage.toFixed(0) * 1;
    },
    handleSuccessVideo(res, file, fileList) {
      if (res.code == 1) {
        this.pageData.videoSrc = res.data[0];
        let obj = {
          coverUrl: res.data[0].cover,
          videoUrl: res.data[0].videoUrl,
          fileName: file.name,
          videoId: res.data[0].videoId,
        };
        /*  this.pageData.videoFileList = fileList.map(
          item => item.response.data
        ); */
        /* this.pageData.videoFileList.push(res.data[0]); */
        this.pageData.videoFileList.push(obj);
        this.formatPlanData();
        this.videoFlag = false;
      } else {
        this.$message.error(res.data.msg);
      }
      console.log(this.pageData.videoFileList);
    },
    handleSuccessImg(res) {
      if (res.code == 1) {
        let data = res.data[0];
        this.pageData.fileList.push(data);
      } else {
        this.$message.error(res.data.msg);
      }
    },
    handleRemoveVideo(file, fileList) {
      //this.pageData.videoSrc = fileList.map((item) => item.response.data[0]);
      //this.pageData.videoFileList = fileList.filter(item => !item.response);
      //this.pageData.videoFileList = fileList;
      // 停止上传
      let ary = [];
      if (fileList.length == 0) {
        this.pageData.videoFileList = [];
        this.pageData.videoSrc = null;
      } else {
        fileList.forEach((item) => {
          let obj = {
            coverUrl: item.response.data[0].coverUrl,
            videoUrl: item.response.data[0].videoUrl,
            fileName: item.name,
          };
          ary.push(obj);
        });
        this.pageData.videoFileList = ary;
      }
      console.log(this.pageData.videoFileList);
      this.uploadAbort("uploadVideo", file);
    },
    onChangeImg() {
      this.$refs["creativeUploadImg"].clearValidate();
    },
    onChangeVideo() {
      this.$refs["creativeUploadVideo"].clearValidate();
    },
    handleRemove(file, fileList) {
      this.pageData.fileList = fileList.map((item) => item.response.data[0]);
    },
    uploadAbort(ref, file) {
      this.$refs[ref].abort(file);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
        // return false
      } else if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
        // return false
      }

      const isSize = new Promise(function (resolve, reject) {
        let _URL = window.URL || window.webkitURL;
        let width = 720;
        let height = 1280;

        let img = new Image();
        img.onload = function () {
          if (!isJPG)
            if (!isLt2M)
              return this.$message.error("上传头像图片大小不能超过 2MB!");
          let valid = img.width == width && img.height == height;
          valid ? resolve() : reject();
        };
        img.src = _URL.createObjectURL(file);
      }).then(
        () => {
          return file;
        },
        () => {
          this.$message.error("请上传720*1280尺寸的图片!");
          return Promise.reject();
        }
      );
      return isJPG && isLt2M && isSize;
    },
    handleExceed(files, fileList) {
      this.$message.error(
        `当前限制选择 15 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    handleExceedVideo(files, fileList) {
      this.$message.error(
        `当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    // 下拉
    fetchPlatformOptions() {
      this.$http({
        method: "get",
        url: "/manage/api/bus/platform/get_platform",
        params: {
          status: 2,
          customerId: 0,
          productId: 0,
        },
      }).then((res) => {
        if (res.data.code === 1) {
          this.platformOptions = res.data.data;
        }
      });
    },
    mapOptionValue(data, id) {
      let item = data.find((item) => item.id === id);
      if (item) {
        return item.name;
      }
      return "-";
    },
    handleChangeCustomerOptions() {
      this.pageData.productId = null;
    },
    // 确定
    handleEnsure() {
      let err = 0;
      this.pageData.groupList.forEach((item) => {
        if (
          this.pageData.tfSettingType == 0 &&
          this.pageData.downloadType == 1
        ) {
          if (!item.landPageInfo && item.landPageType == 1) {
            err = 1;
          }
          if(item.webUrl[0].web_url == '' && item.landPageType == 0){
            err = 1;
          }
        }
      });
      this.pageData.planGroupList.forEach((item) => {
        if (
          this.pageData.tfSettingType == 1 &&
          this.pageData.downloadType == 1
        ) {
          if (!item.landPageInfo && item.landPageType == 1) {
            err = 1;
          }
          if(item.webUrl[0].web_url == '' && item.landPageType == 0){
            err = 1;
          }
        }
      });
      if (err == 1) {
        this.$message.error("请选择Android应用下载详情页");
        return;
      }
      this.createDetail();
    },
    //添加
    handleClickAdd() {
      this.pageData.priceArr.push({
        price: "",
      });
    },
    // 删除
    handleClickRemove(index) {
      this.pageData.priceArr.splice(index, 1);
    },
    handleClickAddSlogan() {
      this.pageData.slogan.push({
        slogan: "",
      });
    },
    // 删除
    handleClickRemoveSlogan(index) {
      this.pageData.slogan.splice(index, 1);
    },
    // 新建
    createDetail() {
      console.log(this.sureParams());
      console.log(JSON.stringify(this.sureParams));
      if (
        this.pageData.delivery_range == "DEFAULT" &&
        this.pageData.advPosition == 0 &&
        this.pageData.inventory_type.includes("INVENTORY_AWEME_FEED")
      ) {
        if (this.pageData.product_selling_points.length == 0) {
          this.$message.error("请生成商品卖点");
          return;
        }
      }
      this.$refs.pageForm.validate((valid) => {
        if (valid) {
          this.$http({
            method: "post",
            url: "/marketing_tt/api/task_tt_general/upload",
            data: this.sureParams(),
          }).then((res) => {
            if (res.data.code === 1) {
              if (
                this.$vnode.parent &&
                this.$vnode.parent.componentInstance &&
                this.$vnode.parent.componentInstance.cache
              ) {
                //清除页面缓存
                if (this.$vnode.componentOptions) {
                  var key =
                    this.$vnode.key == null
                      ? this.$vnode.componentOptions.Ctor.cid +
                        (this.$vnode.componentOptions.tag
                          ? `::${this.$vnode.componentOptions.tag}`
                          : "")
                      : this.$vnode.key;
                  var cache = this.$vnode.parent.componentInstance.cache;
                  var keys = this.$vnode.parent.componentInstance.keys;
                  if (cache[key]) {
                    if (keys.length) {
                      var index = keys.indexOf(key);
                      if (index > -1) {
                        keys.splice(index, 1);
                      }
                    }
                    delete cache[key];
                  }
                }
              }
              this.$message.success(res.data.msg);
              this.$router.back();
            } else {
              this.$message.error(res.data.msg);
            }
          });
        }
      });
    },
    // 详情
    getDetail() {
      this.$http({
        method: "get",
        url: "/manage/api/bus/account/get_by_id",
        params: {
          accountId: this.$route.query.id,
        },
      }).then((res) => {
        if (res.data.code === 1) {
          if (this.pageAction === "edit") {
            let {
              id,
              platformId,
              username,
              // accountName,
              password,
              accountId,
              usernameIdList,
              customerId,
              productId,
              remarks,
            } = res.data.data;
            this.pageData = {
              id,
              platformId,
              username,
              // accountName,
              password,
              accountId,
              usernameIdList,
              customerId,
              productId,
              remarks,
            };
          } else {
            this.pageData = res.data.data;
          }
        }
      });
    },
    // 根据子账号获取应用，人群
    handleChangesubAccount() {
      this.getCrowdList();
      if (this.pageData.market == 2 && this.pageData.subAccount) {
        this.getProductList();
      }
    },
    // 获取应用
    getProductList() {
      this.$http({
        method: "get",
        url: "/marketing_tt/api/task/getProductList",
        params: {
          accountId: this.pageData.subAccount,
        },
      }).then((res) => {
        if (res.data.code === 1) {
          this.chooseAppeOptions = res.data.data;
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
    // 获取人群
    getCrowdList() {
      this.$http({
        method: "get",
        url: "/marketing_tt/api/task/getCrowdList",
        params: {
          accountId: this.pageData.subAccount,
        },
      }).then((res) => {
        if (res.data.code === 1) {
          this.crowdOptions = res.data.data;
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
    // 根据主账号获取子账号
    handleChangeMainAccount() {
      let ary = [];
      let selectList = this.pageData.groupList;
      this.account = [];
      let agent;
      this.mainAccountOptions.forEach((item) => {
        this.pageData.mainAccount.forEach((items, index) => {
          if (index == 0) {
            agent = item.agent;
          }
          if (item.id == items) {
            this.account.push({
              accountId: item.id,
              accountName: item.name,
              agent: item.agent,
              optionList: [],
              groupName: "",
            });
            let content = "DOWNLOAD_URL";
            if (this.pageData.downloadType == 3) {
              content = "EXTERNAL_URL";
            }
            this.$http({
              method: "get",
              url: "/marketing_tt/api/task_tt_general/get_campaign_list",
              params: {
                accountId: item.id,
              },
            }).then((res) => {
              if (res.data.code === 1) {
                this.account.forEach((aitem) => {
                  if (res.data.data.list[0].length > 0) {
                    if (
                      aitem.accountId == res.data.data.list[0][0].account_id
                    ) {
                      aitem.optionList = res.data.data;
                      aitem.groupName = "";
                      console.log(aitem.optionList);
                    }
                  } else {
                    aitem.optionList.list = [[]];
                    aitem.groupName = "";
                  }
                });
                selectList.forEach((citems) => {
                  this.account.forEach((citem) => {
                    if (citems.accountId == citem.accountId) {
                      if (citems.groupName != "") {
                        citem.groupName = citems.groupName;
                      }
                    }
                  });
                });
              }
            });
          }
        });
      });
      this.pageData.groupList = [...this.account];
      this.pageData.groupList.forEach((item) => {
        if (!item.deliveryRangeOptionList) {
          this.$http({
            method: "get",
            url: "/marketing_tt/api/task_tt_general/get_audience_package",
            params: {
              accountId: item.accountId,
              delivery_range: this.pageData.delivery_range,
            },
          }).then((res) => {
            if (res.data.code === 1) {
              this.$set(
                item,
                "deliveryRangeOptionList",
                res.data.data.data.audience_packages
              );
              /* this.account.forEach((account)=>{
                  if(account.accountId == item.id){
                    account.deliveryRangeOptionList = res.data.data.data.audience_packages
                  }
                }) */
            }
          });
        }
        if (!item.convertList) {
          this.$http({
            method: "get",
            url: "/marketing_tt/api/task_tt_general/get_convert_id",
            params: {
              accountId: item.accountId,
            },
          }).then((res) => {
            if (res.data.data) {
              this.$set(
                item,
                "convertList",
                res.data.data.data.ad_convert_list
              );
            } else {
              this.$set(item, "convertList", []);
            }
          });
        }
        if (!item.audience_package) {
          this.$set(item, "audience_package", "");
        }
        if (!item.bid) {
          this.$set(item, "bid", []);
        }
        if (!item.deep_cpabid) {
          this.$set(item, "deep_cpabid", []);
        }
        if (!item.webUrl) {
          this.$set(item, "webUrl", [
            {
              binding: {
                account_id: " ",
                playable_id: " ",
                video_id: " ",
              },
              web_url: "",
            },
          ]);
        }
        if(!item.landpageType){
          this.$set(item,'landPageType',0)
        }
        if (!item.isFirst) {
          this.$set(item, "isFirst", false);
        }
        let schedule_time = [];
        for (let i = 0; i < 7 * 24; i++) {
          schedule_time.push(0);
        }
        /* if(!item.) */
        if (!item.budgetBid) {
          this.$set(item, "budgetBid", [
            {
              adjust_cpa: 0,
              binding: {
                account_id: "",
                playable_id: "",
                video_id: "",
              },
              launchPeriodType: 1, //投放时段类型
              budget: null, //预算出价
              budget_mode: "BUDGET_MODE_DAY",
              deep_bid_type: "DEEP_BID_MIN",
              end_time: "2099-01-01 00:00",
              flow_control_mode: "FLOW_CONTROL_MODE_FAST",
              schedule_time: schedule_time.join(),
              schedule_type: "SCHEDULE_FROM_NOW",
              smart_bid_type: "SMART_BID_CUSTOM", //投放场景(出价方式)
              start_time: this.formatDateTime(new Date(), "y-m-d h-m"),
              bids: [
                {
                  deep_bid_type: "DEEP_BID_MIN",
                  bid: null, //目标转化出价
                  deep_cpabid: null, //深度转化出价
                },
              ],
            },
          ]);
        }
        if (!item.targetSetting) {
          this.$set(item, "targetSetting", [
            {
              app_type: "",
              binding: {
                account_id: "",
                playable_id: "",
                video_id: "",
              },
              convert_id: "",
              download_mode: "DEFAULT",
              download_url: "",
              download_url_type: 0,
              external_url: "",
              open_url: "",
              packages: "",
              pricing: "PRICING_OCPM",
            },
          ]);
        }
        if (!item.conversionList) {
          this.$set(item, "conversionList", [
            {
              targetconversionbid: "", //目标转化出价 //出价和预算
              deepconversionbid: "", //深度转化出价
              deepconversionrate: 0, //深度转化率
              isAuto: "", //是否自动出价
            },
          ]);
        }
      });
      console.log(this.pageData.groupList);
      this.formatPlanData(); //格式化计划数据
      this.getDownloadUrlList(agent, this.pageData.mainAccount[0]);
      /*  this.pageData.subAccount = null;
      this.$http({
        method: "get",
        url: "/marketing/api/task/getByMasterAccount",
        params: {
          id: this.pageData.mainAccount,
        },
      }).then((res) => {
        if (res.data.code === 1) {
          this.subAccountOptions = res.data.data;
        } else {
          this.$message.error(res.data.msg);
        }
      }); */
    },
    handleChangecalltoActionOptions() {},
    // 根据模版获取模版数据
    handleChangeMoudleName() {
      this.$http({
        method: "get",
        url: "/marketing_tt/api/task/getTemplateByName",
        params: {
          name: this.pageData.moudleName,
        },
      }).then((res) => {
        if (res.data.code === 1) {
          this.pageData.moudleCont = res.data.data;
          // this.$set(this.pageData.moudleCont,data)
          // let data =
          //  = data
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
    // 获取主账号
    getMainAccount() {
      this.$http({
        method: "get",
        url: "/marketing_tt/api/task/getAllMasterAccount",
      }).then((res) => {
        if (res.data.code === 1) {
          this.mainAccountOptions = res.data.data;
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
    // 获取模版名称
    /*  getModuleData() {
      this.$http({
        method: "get",
        url: "/marketing_tt/api/task/getAllTemplate",
      }).then((res) => {
        if (res.data.code === 1) {
          this.moudleNameOptions = res.data.data;
        } else {
          this.$message.error(res.data.msg);
        }
      });
    }, */
    // 根据视频选取封面
    handleClickChoosePic() {
      // 图片弹出框+回显
      this.arrImgList = [];
      this.$http({
        method: "get",
        url: "/marketing_tt/api/task/video_intercept",
        params: {
          videoUrl: this.pageData.videoSrc.url,
        },
      }).then((res) => {
        if (res.data.code === 1) {
          this.dialogVisibleImg = true;
          this.imgList = res.data.data;
          for (let index = 0; index < this.imgList.length; index++) {
            this.$set(this.imgList[index], "userCheck", false);
          }
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
    handleClickChoose(e, index) {
      e.userCheck = !e.userCheck;
      let chooseImg = this.imgList[index];
      if (e.userCheck) {
        this.arrImgList.push(chooseImg);
      } else {
        let arrUrl = [chooseImg].map((item) => item.url);
        const result = this.arrImgList.filter(
          (item) => !arrUrl.includes(item.url)
        );
        this.arrImgList = result;
      }
    },
    handleChooseSure() {
      this.dialogVisibleImg = false;
      this.pageData.fileList = this.pageData.fileList.concat(this.arrImgList);
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    toStep(step) {
      this.active = step;
      if (step == 1) {
        window.scrollTo(0, this.scrollTop1);
      }
      if (step == 2) {
        /* document.body.scrollTop = this.scrollTop2; */
        window.scrollTo(0, this.scrollTop2);
      }
      if (step == 3) {
        /* document.body.scrollTop = this.scrollTop2; */
        window.scrollTo(0, this.scrollTop3);
      }
      if (step == 4) {
        /* document.body.scrollTop = this.scrollTop2; */
        window.scrollTo(0, this.scrollTop4);
      }
      if (step == 5) {
        /* document.body.scrollTop = this.scrollTop2; */
        window.scrollTo(0, this.scrollTop5);
      }
    },
    scrollPage() {
      let scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      if (scrollTop + 50 >= this.scrollTop2) {
        this.active = 2;
      }
      if (scrollTop + 50 >= this.scrollTop3) {
        this.active = 3;
      }
      if (scrollTop + 50 >= this.scrollTop4) {
        this.active = 4;
      }
      if (scrollTop + 50 >= this.scrollTop5) {
        this.active = 5;
      }
      if (scrollTop < this.scrollTop2) {
        this.active = 1;
      }
    },
  },
  mounted() {
    window.addEventListener("scroll", this.scrollPage); // 绑定页面的滚动事件
    this.scrollTop1 = this.$el.querySelector("#div1").offsetTop;
    this.scrollTop2 = this.$el.querySelector("#div2").offsetTop;
    this.scrollTop3 = this.$el.querySelector("#div3").offsetTop;
    this.scrollTop4 = this.$el.querySelector("#div4").offsetTop;
    this.scrollTop5 = this.$el.querySelector("#div5").offsetTop;
    let dom = document.querySelector(".el-steps");
    dom.style.cousor = "pointer";
    console.log(dom);
  },
  created() {
    // this.getDetail();
    // 获取主账号
    this.getIndustry();
    this.get_account_list();
    /* this.getMainAccount(); */
    // 获取模版名称
    /* this.getModuleData(); */
    this.initDistPicker();
    eventBus.$on(
      "playableInfo",
      function (data) {
        console.log(data);
        if (this.pageData.collocationType == 1) {
          this.pageData.groupList.forEach((item) => {
            if (item.accountId == data[0].advertiser_id) {
              this.$set(item, "playableInfo", data);
              /* item.budgetBid.binding.playable_id = data. */
            }
          });
        }
        this.formatPlanData();
      }.bind(this)
    );
    eventBus.$on(
      "landPageInfo",
      function (data) {
        console.log(data);
        if (this.pageData.tfSettingType == 0) {
          this.pageData.groupList.forEach((item) => {
            if (item.accountId == data.accountId) {
              this.$set(item, "landPageInfo", data);
            }
          });
        } else {
          this.$set(
            this.pageData.planGroupList[data.index],
            "landPageInfo",
            data
          );
        }
        console.log(this.pageData.groupList);
      }.bind(this)
    );
    // // 获取选择应用
    // this.getProductList()
    // // 获取定向人群
    // this.getCrowdList()
    // // 获取排除人群
    // this.getCrowdOutList()
    /**
     * 获取主帐号
     * 1.根据主账号获取子账号
     * 2.获取模版名称传String
     * 3.根据模版名称获取模版内容
     * 4.根据子账户获取应用，定向人群,
     * 4-1 Html 渲染应用，定向人群    +++++++++++++
     * 5.按钮文案写死传String
     * 6.上传视频，图片之后赋值
     * 7.添加对应字段           +++++++++++++++++
     *
     * 上传视频，图片，出价校验问题
     *
     *
     *
     * 定向人群。排除人群，选择应用，
     * 年龄，投放时间，营销目标，选择应用，优先应用商店下载，自定义，投放链接，定向人群，排除人群
     */
  },
};
</script>
<style scoped>
.el-icon-caret-right {
  transition: none !important;
}
.el-select__input {
  vertical-align: baseline !important;
}
.el-select--medium {
  vertical-align: bottom !important;
}
.title {
  margin-top: 20px;
}
.coumn {
  width: 400px;
}
.video-content {
  display: inline-block;
  position: relative;
  width: 200px;
  text-align: center;
}
.video-content .video-icon {
  position: absolute;
  right: 10px;
  top: 10px;
}
.video-content .video-name {
  height: 65px;
  overflow: hidden;
  font-size: 10px;
}
.text-info {
  width: 650px;
  padding: 5px;
}
video {
  width: 148px;
  height: 148px;
}
.tip {
  position: absolute;
  top: -55px;
  left: 520px;
  font-size: 12px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #c0ccda;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  background-color: #fbfdff;
  width: 148px;
  height: 148px;
  line-height: 148px;
  text-align: center;
  border-radius: 6px;
}
.avatar {
  width: 148px;
  height: 148px;
  display: block;
}
.b50 {
  width: 55% !important;
}
.chooseApp {
  word-break: break-all;
}
.putDate {
  position: absolute;
  top: 0px;
  left: 360px;
}
.dialogCont {
  overflow: hidden;
}
.dialogImgCont {
  float: left;
  margin-right: 7px;
  margin-left: 8px;
  position: relative;
  width: 148px;
  height: 148px;
  margin-top: 15px;
}
.chooseImg {
  position: absolute;
  left: 200px;
  top: 80px;
}
.imgList {
  width: 148px;
  height: 148px;
}
.imgList-icon {
  position: absolute;
  right: 5px;
  top: 5px;
  font-size: 20px;
}
.imgList-icon img {
  width: 28px;
  height: 28px;
}
</style>
